MutationObserver 回调函数未被触发？原因及解决方案
MutationObserver 是一种强大的 Web API，用于监听 DOM 树的变化。然而，有时开发者会发现 MutationObserver 并没有像预期那样触发回调函数。这通常是由于观察选项配置不正确导致的。
正如摘要所述，正确配置观察选项是确保 MutationObserver 正常工作的关键。
观察选项的重要性
MutationObserver.observe() 方法的第二个参数是一个配置对象，用于指定要观察的 DOM 变化类型。如果配置不当，MutationObserver 将不会监听到目标变化，从而导致回调函数无法触发。
常见的观察选项包括：
- childList: 观察目标节点子节点的添加或删除。
- attributes: 观察目标节点属性的修改。
- characterData: 观察目标节点文本内容的修改。
- subtree: 设置为 true 时，观察目标节点的所有后代节点。
- attributeOldValue: 设置为 true 时，在属性修改时记录旧值。
- characterDataOldValue: 设置为 true 时，在文本内容修改时记录旧值。
- attributeFilter: 一个属性名称数组，用于过滤要观察的属性。
示例与分析
考虑以下代码：
<!DOCTYPE html>
<html>
<body>
<div id="msg">Hello</div>
<script>
var el = document.getElementById("msg");
var obs = new MutationObserver(() => {
console.log("Changed!");
});
obs.observe(el, {subtree: true, characterData: true});
setTimeout(() => {
el.innerHTML += " World!";
}, 3000);
</script>
</body>
</html>这段代码试图监听 id 为 msg 的 div 元素的文本内容变化，并在 3 秒后通过 innerHTML 添加 " World!"。然而，回调函数 console.log("Changed!") 并不会被触发。
原因在于： innerHTML 的修改实际上是替换了整个 DOM 结构，而不是直接修改文本节点。因此，characterData: true 并不能监听到这种变化。
解决方案： 将观察选项修改为 childList: true，以监听子节点的添加或删除。
<!DOCTYPE html>
<html>
<body>
<div id="msg">Hello</div>
<script>
var el = document.getElementById("msg");
var obs = new MutationObserver(() => {
console.log("Changed!");
});
obs.observe(el, {childList: true});
setTimeout(() => {
el.innerHTML += " World!";
}, 3000);
</script>
</body>
</html>修改后的代码中，obs.observe(el, {childList: true}); 监听了 div 元素子节点的变动。 当 innerHTML 修改导致子节点被替换时，MutationObserver 就能检测到，从而触发回调函数。
总结与注意事项
- 仔细分析 DOM 变化的类型，选择合适的观察选项。
- innerHTML 的修改通常需要监听 childList。
- textContent 的修改通常可以使用 characterData。
- subtree: true 可以监听所有后代节点的变动，但会增加性能开销，请谨慎使用。
- 使用 disconnect() 方法停止观察，释放资源，避免内存泄漏。
正确理解和配置 MutationObserver 的观察选项是有效利用该 API 的关键。通过本文提供的示例和分析，希望能帮助开发者更好地理解 MutationObserver 的工作原理，并解决实际开发中遇到的问题。
