js如何使用MutationObserver

在JavaScript中，MutationObserver是一种API，用于检测DOM（文档对象模型）的变化。它可以帮助我们在元素结构、属性或内容发生改变时执行相应的回调函数。以下是使用MutationObserver的基本步骤：

1. **创建观察者**: 首先，你需要创建一个`MutationObserver`实例，传递一个`callback`函数作为第一个参数，这个函数会在检测到变化时被调用。

const observer = new MutationObserver(mutationsList => {
  // 这里是处理DOM变化的回调函数
});

2. **配置观察选项**: 第二个参数是一个`options`对象，可以包含以下几个可选属性：
- `attributes`: 如果设置为`true`，会监控元素的属性变化。
- `childList`: 如果设置为`true`，会监控节点增删和子节点变动。
- `characterData`: 如果设置为`true`，会监控文本节点的数据变化。

const config = { attributes: true, childList: true, subtree: true };

3. **开始观察**: 将目标DOM元素和配置传给`observe()`方法开始观察。

observer.observe(targetNode, config);

4. **停止观察**: 当不再需要观察时，可以调用`observer.disconnect()`来关闭观察。

5. **回调处理**: 回调函数`mutationsList`参数是一个`MutationRecord[]`数组，包含了所有检测到的变更信息。

示例：

let targetNode = document.getElementById('myElement');

observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('Mutation detected:', mutation.type);
    // 根据mutation记录的具体类型做相应处理
  });
});

config = { attributes: true, childList: true, subtree: true };

observer.observe(targetNode, config);