MutationObserver 的用法MutationObserver 是一个用于监视 DOM 变化的接口，可以在检测

MutationObserver 是一个用于监视 DOM 变化的接口，可以在检测到 DOM 树的变化时执行回调函数。它比传统的 DOM 事件（如 DOMSubtreeModified）更高效和灵活。以下是 MutationObserver 的详细用法和示例。

基本用法

创建一个 MutationObserver 实例：
```
	const observer = new MutationObserver(callback);
```
callback 是一个在观察到 DOM 变化时执行的函数。
指定观察选项：
```
const config = { attributes: true, childList: true, subtree: true };	
```
config 对象用于配置需要观察的变化类型。常见的选项有：
- attributes: 当元素的属性发生变化时触发回调。
- childList: 当子节点被添加或删除时触发回调。
- subtree: 当目标节点及其后代节点发生变化时触发回调。
启动观察：
```
	observer.observe(targetNode, config);	
```
targetNode 是要观察的 DOM 节点，config 是指定的观察选项。
停止观察：
```
	observer.disconnect();
```

示例：以下是一个完整的示例，展示如何使用 MutationObserver 监听 DOM 树的变化：

// 创建一个回调函数，在观察到 DOM 变化时执行
const callback = (mutationsList, observer) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        } else if (mutation.type === 'attributes') {
            console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
    }
};

// 创建一个 MutationObserver 实例并传入回调函数
const observer = new MutationObserver(callback);

// 选择要观察的节点
const targetNode = document.getElementById('someElement');

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

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

// 需要时停止观察
// observer.disconnect();

用法解释

创建回调函数：回调函数 callback 会接收两个参数：
- mutationsList：一个数组，包含所有检测到的变化。
- observer：调用此回调函数的 MutationObserver 实例。
配置观察选项： config 对象定义了要观察的变化类型，可以组合使用多个选项。
启动观察：使用 observe 方法将观察器绑定到目标节点，并开始观察。
停止观察： disconnect 方法用于停止观察，通常在不再需要观察时调用。

典型应用场景

动态内容更新检测：监视动态生成或修改的内容。
表单验证：监听表单输入变化并进行实时验证。
异步加载内容：在异步加载的内容插入 DOM 后执行某些操作。

使用 MutationObserver 可以高效地响应 DOM 的变化，适用于需要实时监视和处理 DOM 更新的场景。