MutationObserver用法详解与操作指南

MutationObserver 是现代 Web 开发中监听 DOM 变化的唯一可靠方案，它以异步、批量、高性能的方式替代了早已废弃的 DOMNodeInserted 等事件；通过灵活配置 childList、subtree、attributes 等选项，可精准捕获节点增删、属性变更等各类变动，同时兼顾性能与准确性——但必须牢记手动 disconnect 避免内存泄漏、合理复用实例、理解其微任务时机与非回溯特性，才能在动态 UI、单页应用等复杂场景中稳定高效地实现 DOM 变化响应。

监听DOM新增或删除节点时，用 MutationObserver 而不是 DOMNodeInserted

旧式事件如 DOMNodeInserted 和 DOMNodeRemoved 已被废弃，现代浏览器中无法触发，强行绑定也不会报错但完全无效。必须用 MutationObserver 替代。

它不是事件，而是一个异步观察器：变化发生后批量收集、延迟回调，类似 Promise.then 的微任务时机。

• 只监听已挂载的 DOM 节点，对未插入文档的 fragment 无效
• 观察器启动后才开始捕获变化，之前的变化不会回溯
• 回调函数接收的是 MutationRecord[] 数组，每个记录含 type（"childList" / "attributes" / "characterData"）、addedNodes、removedNodes 等字段

监听子节点增删：配置 { childList: true } 就够了

这是最常见需求，比如监听某个容器内是否动态插入了按钮或列表项。注意默认不递归，只看直接子元素。

const target = document.getElementById('list');
const observer = new MutationObserver(records => {
  records.forEach(record => {
    record.addedNodes.forEach(node => {
      if (node.nodeType === 1 && node.classList.contains('item')) {
        console.log('新 item 已插入', node);
      }
    });
  });
});

observer.observe(target, { childList: true });

• 如果要监听后代所有层级（比如嵌套卡片里的按钮），加 subtree: true
• childList: true 时，addedNodes 和 removedNodes 是 NodeList，需遍历判断 nodeType（1=元素，3=文本）
• 不要在回调里直接调用 observer.disconnect() 后又立刻 observe()，容易漏掉连续变化

监听属性变化：必须显式指定 attributes: true 和目标属性

MutationObserver 默认不监听任何属性，连 class 或 style 都不会捕获，除非明确声明。

• 监听所有属性：{ attributes: true }
• 只监听特定属性（性能更好）：{ attributes: true, attributeFilter: ['class', 'data-status'] }
• 想看到旧值？加 attributeOldValue: true，否则 oldValue 为 undefined
• attributes 和 childList 可同时启用，互不干扰

示例：监听按钮是否被禁用

observer.observe(button, {
  attributes: true,
  attributeFilter: ['disabled'],
  attributeOldValue: true
});

// 回调中可对比：
if (record.attributeName === 'disabled' && record.oldValue === null && record.target.hasAttribute('disabled')) {
  console.log('按钮刚被禁用');
}

避免内存泄漏和重复观察：记得手动 disconnect() 和复用实例

MutationObserver 实例会持续持有对目标节点的引用，若目标节点被移除但观察器没停，就可能造成内存泄漏——尤其在单页应用反复渲染组件时。

• 组件卸载前务必调用 observer.disconnect()
• 不需要频繁新建实例：同一个 MutationObserver 可多次 observe() 不同目标（先 disconnect() 再 observe 新目标）
• 不要在每次 setState 或 render 里新建 observer，应缓存实例并按需启停
• 调试时可用 console.log(observer.takeRecords()) 查看已排队但未派发的记录（清空队列）

真正容易被忽略的是：观察器回调执行期间发生的 DOM 变化，仍会被捕获并合并到下一轮回调——它不阻塞渲染，也不保证“立即响应”，而是等当前 JS 栈清空后统一派发。如果你需要精确到毫秒级响应，它不适合；但对绝大多数 UI 同步场景，这反而是更稳定的设计。

以上就是《MutationObserver用法详解与操作指南》的详细内容，更多关于的资料请关注golang学习网公众号！