利用Mutation Observer监听DOM变化

Mutation Observer 提供高效异步监听 DOM 变化，支持属性、子节点、文本等监控。通过 new MutationObserver(callback) 创建实例，调用 observe(target, config) 启动监听，配置项可精确控制监听范围如 childList、attributes、characterData 等。推荐针对具体节点监听，避免性能损耗。常见场景包括动态内容插入、class 变化检测、表单值监听。需合理管理生命周期，在不需要时调用 disconnect() 释放资源，防止内存泄漏。适用于 SPA 组件销毁前清理，确保稳定性和性能。

Mutation Observer 是现代浏览器提供的一种高效监听 DOM 变化的方法。相比已废弃的 DOM Mutation Events，它采用异步回调机制，在性能和灵活性上都有显著提升。通过它，你可以监控元素属性、子节点、文本内容等变化。

基本用法

创建一个 MutationObserver 实例时，传入一个回调函数，该函数会在观察到变化时被调用。然后调用 observe() 方法指定要监控的目标节点和配置项。

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('变化类型:', mutation.type);
    if (mutation.type === 'childList') {
      console.log('新增节点:', mutation.addedNodes);
      console.log('删除节点:', mutation.removedNodes);
    }
  });
});

// 开始监听某个元素
observer.observe(document.body, {
  childList: true,        // 监听子节点增删
  subtree: true,          // 是否包括所有后代节点
  attributes: true,       // 监听属性变化
  attributeFilter: ['class'], // 只监听 class 属性
  characterData: true     // 监听文本内容变化
});
  

常见监控场景与配置建议

根据实际需求调整 observe 的配置参数，可以精准控制监听范围，避免不必要的回调触发。

听脑AI

听脑AI语音，一款专注于音视频内容的工作学习助手，为用户提供便捷的音视频内容记录、整理与分析功能。

378

查看详情

• 监控动态插入的内容（如 Ajax 加载）：启用 childList 和 subtree
• 检测样式类切换：开启 attributes 并配合 attributeFilter: ['class']
• 监听表单值变化（input 元素文本）：需要同时设置 characterData: true 和目标为文本节点的父级
• 减少性能开销：尽量避免监听整个 document.body，优先选择具体容器节点

停止监听与资源管理

当不再需要监听时，应及时断开观察器，防止内存泄漏或重复执行。

• observer.disconnect()：停止所有监听，清除待处理的变更记录
• observer.takeRecords()：获取当前已发生但未处理的变更列表，常用于清理前分析数据
• 在 SPA 或组件销毁时（如 Vue/React 生命周期结束），务必调用 disconnect

基本上就这些。Mutation Observer 虽强大，但也别滥用。合理使用能帮你捕捉关键 DOM 变动，而不当的监听可能导致性能下降。掌握好观察粒度和生命周期管理，才能发挥它的真正价值。

以上就是利用Mutation Observer监听DOM变化的详细内容，更多请关注php中文网其它相关文章！