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 不会触发回调。
例如，以下代码可能无法按预期工作：
Hello