JavaScript DOM 变动观察器（Mutation Observer）

Mutation Observer 是 JavaScript 中用于监视 DOM 树变化的强大 API。它提供了一种高效的方式来监听对 DOM 树所做的更改，并在这些更改发生时执行回调函数。

基本用法

// 创建一个观察器实例
const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('DOM 发生了变化:', mutation);
  });
});

// 配置观察选项
const config = { 
  attributes: true,
  childList: true,
  subtree: true 
};

// 选择要观察的目标节点
const target = document.querySelector('#target-element');

// 开始观察目标节点
observer.observe(target, config);

// 停止观察
// observer.disconnect();

配置选项

Mutation Observer 的配置对象可以包含以下属性：

• childList：设置为 true 以监视目标节点子节点的添加或删除
• attributes：设置为 true 以监视目标节点属性的变化
• attributeFilter：要监视的特定属性名称数组（不需要 attributes 设为 true）
• attributeOldValue：设置为 true 以记录属性更改前的值
• characterData：设置为 true 以监视文本内容的变化
• characterDataOldValue：设置为 true 以记录文本更改前的值
• subtree：设置为 true 以将监视扩展到目标节点的所有后代

MutationRecord 对象

回调函数接收的 mutations 参数是一个 MutationRecord 对象数组，每个对象包含以下属性：

• type：变化的类型（"attributes"、"characterData" 或 "childList"）
• target：受变化影响的节点
• addedNodes：添加的节点列表
• removedNodes：移除的节点列表
• previousSibling：添加或移除节点的前一个兄弟节点
• nextSibling：添加或移除节点的后一个兄弟节点
• attributeName：更改的属性名称
• attributeNamespace：更改属性的命名空间
• oldValue：属性的旧值（取决于配置）

实际应用示例

1. 监视元素属性变化

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      console.log(`属性 ${mutation.attributeName} 已更改`);
    }
  });
});

observer.observe(document.getElementById('myElement'), {
  attributes: true
});

2. 监视子元素添加/移除

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length > 0) {
      console.log('添加了节点:', mutation.addedNodes);
    }
    if (mutation.removedNodes.length > 0) {
      console.log('移除了节点:', mutation.removedNodes);
    }
  });
});

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

3. 监视整个子树的变化

const observer = new MutationObserver((mutations) => {
  console.log('DOM 子树发生了变化');
});

observer.observe(document.documentElement, {
  childList: true,
  subtree: true
});

与旧方法的比较

Mutation Observer 替代了已废弃的 MutationEvent，具有以下优势：

1. 性能更好：不是为每个微小变化触发事件，而是批量处理变化
2. 更灵活：可以精确配置要观察的变化类型
3. 更可靠：不会因为观察大量变化而阻塞主线程

注意事项

• Mutation Observer 是异步触发的，变化会被批量处理
• 观察大量 DOM 节点可能会影响性能
• 回调函数中的代码应尽可能高效，避免复杂操作

Mutation Observer 是现代 Web 应用中监视 DOM 变化的首选方法，特别适合动态内容加载、单页应用和需要响应 DOM 变化的库或框架。