使用MutationObserver观察DOM树结构发生变化用法总结

7 min read

MutationObserver是一种用于观察DOM树结构变化的API。它可以用来观察DOM中的子节点添加、删除、属性修改等变化，以便在这些变化发生时执行相应的操作。

使用MutationObserver需要先创建一个观察器对象，然后通过该对象指定要观察的DOM元素以及要观察的变化类型。当指定的变化类型发生时，观察器对象会自动触发回调函数，并提供一份变化记录列表，其中包含所有发生的变化。

使用MutationObserver的基本步骤如下：

  1. 创建一个MutationObserver对象，并传入一个回调函数作为参数。

  2. 调用MutationObserver对象的observe方法，指定要观察的DOM元素以及要观察的变化类型。

  3. 当指定的变化类型发生时，MutationObserver对象会自动触发回调函数，并提供一份变化记录列表，其中包含所有发生的变化。

示例代码如下：

const targetNode = document.getElementById('target');

// 创建一个MutationObserver对象
const observer = new MutationObserver((mutationsList, observer) => {
  // 在这里处理变化记录
  console.log(mutationsList);
});

// 监听节点添加、删除、属性变化
const config = { childList: true, subtree: true, attributes: true };

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

在上面的示例中，我们创建了一个MutationObserver对象，并通过observe方法指定要观察的DOM节点(targetNode)以及要观察的变化类型(childList: 子节点添加/删除, subtree: 监听目标节点以及其所有后代节点, attributes: 属性变化)。当指定的变化类型发生时，MutationObserver对象会自动触发回调函数，并将变化记录列表(mutationsList)作为参数传入。在回调函数中，我们可以处理这份变化记录，执行相应的操作。

总的来说，MutationObserver提供了一种方便且高效的方法，用于监测DOM树结构变化，并及时响应这些变化。它在现代Web开发中被广泛使用，尤其是处理大型、复杂的界面交互时会更为实用。