推荐答案
// www.javascriptcn.com code example
// 选择需要观察的节点
const targetNode = document.getElementById('targetElement');
// 配置观察选项
const config = { attributes: true, childList: true, subtree: true };
// 创建一个回调函数，当观察到 DOM 变化时执行
const callback = function(mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === 'childList') {
console.log('子节点发生变化');
} else if (mutation.type === 'attributes') {
console.log('属性发生变化');
}
}
};
// 创建一个 MutationObserver 实例并传入回调函数
const observer = new MutationObserver(callback);
// 开始观察目标节点
observer.observe(targetNode, config);
// 停止观察
// observer.disconnect();本题详细解读
1. Mutation Observer API 简介
Mutation Observer API 提供了一种异步观察 DOM 树变化的能力。它可以监听 DOM 节点的添加、删除、属性变化等操作，并在这些变化发生时执行回调函数。
2. 使用步骤
选择目标节点：首先需要选择你想要观察的 DOM 节点。可以通过
document.getElementById、document.querySelector等方法获取目标节点。配置观察选项：通过配置对象
config来指定你想要观察的变化类型。常见的配置项包括：attributes：是否观察属性变化。childList：是否观察子节点的添加或删除。subtree：是否观察所有后代节点的变化。
创建回调函数：回调函数会在 DOM 变化时被调用。它接收两个参数：
mutationsList：一个包含所有变化的 MutationRecord 对象的数组。observer：触发回调的 MutationObserver 实例。
创建并启动观察者：通过
new MutationObserver(callback)创建一个观察者实例，并调用observe(targetNode, config)方法开始观察目标节点。停止观察：如果需要停止观察，可以调用
observer.disconnect()方法。
3. 适用场景
- 动态内容加载：在单页应用（SPA）中，当内容动态加载时，可以使用 Mutation Observer 来监听 DOM 的变化并执行相应的操作。
- 表单验证：监听表单元素的属性变化，实时验证用户输入。
- 第三方脚本集成：当需要与第三方脚本集成时，可以使用 Mutation Observer 来监听 DOM 变化并做出响应。
4. 注意事项
- 性能影响：频繁的 DOM 变化可能会导致回调函数频繁执行，影响性能。因此，在使用时应合理配置观察选项，避免不必要的监听。
- 浏览器兼容性：Mutation Observer API 在现代浏览器中得到了广泛支持，但在一些旧版浏览器中可能不支持。