如何利用Mutation Observer监听DOM树的动态变化？

MutationObserver是现代浏览器用于监听DOM变化的API，性能优于废弃的Mutation Events。通过构造函数创建实例并传入回调函数，可捕获节点增删、属性修改等变动。回调接收MutationRecord数组和观察器实例，每项记录包含变动类型、新增/删除节点、属性名及旧值等信息。调用observe()方法指定目标元素和配置项（如childList、subtree、attributes等）启动监听。适用于动态内容场景，如自动绑定事件、监控第三方脚本插入或单页应用内容更新。使用disconnect()停止监听以避免内存泄漏，或调用takeRecords()获取未处理记录。应合理使用，防止过度监听影响性能。

Mutation Observer 是现代浏览器提供的 API，用于监听 DOM 树的动态变化。相比已废弃的 Mutation Events，它性能更好、更灵活。只要 DOM 发生变动——比如节点添加、属性修改、文本内容改变——你都可以及时捕获并做出响应。

创建 MutationObserver 实例

使用 MutationObserver 构造函数创建观察器，传入一个回调函数。这个回调会在每次检测到指定类型的 DOM 变化时被触发。

回调接收两个参数：一个是 MutationRecord 对象数组（每项记录一次变更），另一个是观察器实例本身。

示例：

const observer = new MutationObserver((mutations, obs) => {
  mutations.forEach(mutation => {
    console.log('变动类型:', mutation.type);
    if (mutation.type === 'childList') {
      console.log('新增节点:', mutation.addedNodes);
      console.log('删除节点:', mutation.removedNodes);
    }
    if (mutation.type === 'attributes') {
      console.log('属性名:', mutation.attributeName);
      console.log('旧值:', mutation.oldValue);
    }
  });
});

配置观察选项

调用 observe() 方法启动监听，并传入要观察的目标元素和配置项。配置项决定监听哪些类型的变更。

常用配置选项包括：

• childList: 监听子节点的增删
• subtree: 是否递归监听所有后代节点
• attributes: 监听元素属性的变化
• characterData: 监听文本内容的变化
• attributeOldValue: 记录属性旧值
• characterDataOldValue: 记录文本旧值

示例：监听某个容器内的结构变化和属性变化

PatentPal专利申请写作

AI软件来为专利申请自动生成内容

13

查看详情

observer.observe(document.getElementById('container'), {
  childList: true,
  subtree: true,
  attributes: true,
  attributeOldValue: true
});

实际应用场景

你可以用 MutationObserver 处理一些动态加载内容的场景，比如：

• 第三方脚本插入广告或弹窗后自动处理
• 单页应用中路由变化但 URL 不变时，监控内容区域更新
• 表单字段动态生成后绑定事件
• 监控输入框 placeholder 变化或禁用状态切换

例如：自动为新插入的按钮绑定点击事件

停止监听与清理

一旦不再需要监听，应调用 disconnect() 方法防止内存泄漏。

如果只想暂时暂停，可以先 disconnect，之后重新 observe。也可以使用 takeRecords() 获取当前尚未处理的变动记录。

基本上就这些。MutationObserver 灵活但别滥用，只在真正需要响应 DOM 变化时使用，避免过度监听影响性能。

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