MutationObserver用法

MutationObserver是JavaScript的一个API，用于监测DOM树的变化。它可以观察到节点的添加、删除、属性的变化以及文本内容的变化等。MutationObserver有三个参数：回调函数、观察目标和配置对象。

回调函数是当观察目标发生变化时被调用的函数，它接受两个参数：mutations和observer。mutations是一个数组，包含了所有发生变化的MutationRecord对象。observer是MutationObserver对象本身。

观察目标是需要被观察的DOM节点。它可以是任何DOM节点，包括document对象和文档片段。

配置对象是一个可选的参数，用于指定观察目标的哪些属性需要被观察。它有以下属性：

1. childList：观察目标子节点的变化（添加或删除子节点）。
2. attributes：观察目标属性的变化。
3. characterData：观察目标文本节点的内容变化。
4. subtree：是否观察子树中的变化。

下面是一个简单的示例，当观察目标的子节点发生变化时，打印出变化的信息：

// 选取需要观察变化的节点
const targetNode = document.getElementById('some-id');

// 创建一个新的MutationObserver对象
const observer = new MutationObserver((mutations, observer) => {
  console.log(mutations);
});

// 配置MutationObserver对象
const config = {
  childList: true,
  attributes: true,
  subtree: true
};

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

在上面的例子中，我们选择了一个id为“some-id”的节点作为观察目标，并将MutationObserver对象配置为观察子节点、属性和子树的变化。当观察目标发生变化时，回调函数将被调用，并打印出变化的信息。