MutationObserver 是一种强大的 Web API，用于监听 DOM 树的变化。 然而，有时开发者会遇到 MutationObserver 没有按预期触发回调函数的情况。正如本文摘要所说，当使用 innerHTML 修改 DOM 时，需要特别注意监听配置。
MutationObserver 基础
MutationObserver 允许你注册一个回调函数，该函数会在 DOM 树发生特定类型的变化时被调用。 可以通过 MutationObserver.observe() 方法来指定要观察的 DOM 节点以及要观察的变化类型。 常见的观察选项包括：
- childList: 监听目标节点直接子节点的添加或删除。
- attributes: 监听目标节点属性的变化。
- characterData: 监听目标节点文本内容的变化。
- subtree: 设置为 true 时，监听目标节点及其所有后代节点的变化。
常见问题：innerHTML 修改与 childList
当使用 innerHTML 属性修改 DOM 元素的内容时，实际上会替换该元素的所有子节点。 这意味着原有的节点会被删除，新的节点会被添加。 因此，如果只是监听 characterData，而使用 innerHTML 替换了整个子节点，那么 MutationObserver 不会触发回调。
例如，以下代码可能无法按预期工作：
<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>在这个例子中，我们试图监听 msg 元素及其子树的文本内容变化。 但是，el.innerHTML += " World!" 实际上是替换了 msg 元素的整个内容，而不是简单地修改了文本。 因此，characterData 的监听不会触发回调。
解决方案：监听 childList
要正确监听 innerHTML 修改带来的 DOM 变化，需要将 childList 选项设置为 true。 这样，MutationObserver 就会在子节点被添加或删除时触发回调。
修改后的代码如下：
<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>在这个修改后的版本中，我们监听了 msg 元素的 childList 变化。 当 el.innerHTML += " World!" 执行时，msg 元素的子节点会被替换，从而触发 MutationObserver 的回调函数。
注意事项
- 性能考虑： 监听 subtree: true 可能会影响性能，尤其是在大型 DOM 树上。 尽量缩小监听范围，只监听必要的节点。
- 回调函数处理： MutationObserver 的回调函数接收一个 MutationRecord 数组，每个 MutationRecord 描述了一个 DOM 变化。 在回调函数中，需要仔细检查 MutationRecord 的类型和属性，以确定发生了什么变化，并采取相应的行动。
- 停止观察： 使用 MutationObserver.disconnect() 方法可以停止观察。 在不再需要监听 DOM 变化时，应该及时停止观察，以释放资源。
总结
MutationObserver 是一个强大的 DOM 监听工具，但需要正确配置才能正常工作。 当使用 innerHTML 修改 DOM 时，务必注意监听 childList 变化。 通过理解 MutationObserver 的工作原理和正确配置监听选项，可以有效地监听 DOM 变化，并构建更具响应性和交互性的 Web 应用。
