jQuery 3.2.1中DOMSubtreeModified弃用，求替换为MutationObserver方案

嗨，别发愁啦！把弃用的DOMSubtreeModified换成MutationObserver其实没那么复杂，我一步步给你讲清楚，毕竟你说编程基础还比较薄弱～

先看你原来的代码：

$('#damage1').bind("DOMSubtreeModified",function(){displayIcons();});

这段代码的核心需求是：当#damage1元素的子树（包括它自身的内容、子节点）发生任何修改时，调用displayIcons()函数。下面是完全匹配这个需求的现代写法：

完整替换代码 #

// 先获取目标元素的原生DOM节点（MutationObserver需要原生节点，不是jQuery对象）
const targetElement = $('#damage1')[0];

// 创建MutationObserver实例，指定变化发生时要执行的逻辑
const observer = new MutationObserver(function() {
  // 和你原来的逻辑一致，子树变化时调用displayIcons
  displayIcons();
});

// 配置观察规则，完全对应原来DOMSubtreeModified的触发场景
const observerOptions = {
  subtree: true,          // 监听目标元素的整个子树
  childList: true,        // 监听子节点的添加/删除
  attributes: true,       // 监听元素属性的变化
  characterData: true     // 监听文本内容的变化
};

// 启动观察，开始监听目标元素的变化
observer.observe(targetElement, observerOptions);

逐行帮你理解 #

• const targetElement = $('#damage1')[0];：jQuery选择器返回的是封装后的jQuery对象，我们取它的第一个元素（也就是原生的DOM节点），因为MutationObserver只能监听原生DOM元素。
• new MutationObserver(...)：创建一个观察者实例，括号里的函数就是当监听的变化发生时要执行的代码，这里直接复用你原来的displayIcons()就行。
• observerOptions：这是告诉观察者我们要监听哪些类型的变化，这里的配置完全覆盖了原来DOMSubtreeModified的触发条件——只要目标元素的子树里有任何节点、属性、文本变化，都会触发回调。
• observer.observe(targetElement, observerOptions)：启动观察者，让它开始监控目标元素的变化。

额外小提示（可选） #

如果之后你需要停止监听（比如页面关闭、组件销毁时），可以调用下面的代码避免不必要的性能消耗：

observer.disconnect();

内容的提问来源于stack exchange，提问作者Bachir Messaouri