使用 MutationObserver 监测 DOM 变化

在复杂的动态网页中，某些 DOM 元素可能会频繁发生变化，比如新增节点、属性变化、文本内容变化等。使用传统的事件监听器无法捕捉所有这些变化，而 MutationObserver API 提供了一种高效的方式来监听 DOM 的变动。

什么是 MutationObserver？

MutationObserver 是一个用于监听 DOM 树中变化的 API，你可以监控元素的子节点、属性或文本内容的变化，并在变化发生时执行回调函数。

基本用法

<div id="my-element">Hello World</div>

// 创建 MutationObserver 实例
const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('DOM 变化:', mutation);
  });
});

// 选择需要观察的目标节点
const targetNode = document.getElementById('my-element');

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

// 开始观察
observer.observe(targetNode, config);

// 模拟 DOM 变化
setTimeout(() => {
  targetNode.textContent = 'New content';
}, 2000);

应用场景

1. 表单自动保存：检测表单内容的变化，并自动保存数据。
2. UI 动态更新：当某个区域内容变化时，自动更新相关部分的界面。
3. 监听动态加载内容：在 AJAX 操作后，动态监控新增节点并执行某些操作。

优势

• 提供了一种高效的方式监控 DOM 变动，避免了频繁的轮询操作。
• 灵活的配置项可以精确地监听所需的变化类型。