利用Mutation Observer监听DOM变化_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

利用Mutation Observer监听DOM变化

2025-10-30

浏览次数：次

返回列表

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

利用mutation observer监听dom变化

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     // 监听文本内容变化
});