带你读《现代Javascript高级教程》三十、MutationObserver：监测DOM变化的强大工具（1）https://developer.aliyun.com/article/1349495?groupCode=tech_library
4. 使用MutationObserver的示例
下面通过几个示例来演示如何使用MutationObserver进行DOM变化的监测。
1） 监测元素属性变化
下面的示例代码演示了如何使用MutationObserver监测元素的属性变化，并在变化发生后进行相应的处理：
// 目标元素const targetElement = document.querySelector('target'); // 创建一个MutationObserver实例const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes') { console.log(`属性 ${mutation.attributeName} 发生变化`); // 执行相应的处理逻辑 } });}); // 配置观察器const config = { attributes: true,}; // 启动观察器 observer.observe(targetElement, config);
在上述代码中，我们首先选择了一个目标元素，然后创建了一个MutationObserver实例。接下来，我们配置了观察器，指定我们要监测的变化类型为属性变化。最后，我们通过调用observe方法，将观察器绑定到目标元素上。
当目标元素的属性发生变化时，MutationObserver的回调函数将被调用，并传递一个mutations参数，该参数包含了所有发生的变化。在回调函数中，我们可以根据变化的类型（mutation.type）来判断具体的变化类型，并执行相应的处理逻辑。
2） 监测子元素的添加或移除
下面的示例代码演示了如何使用MutationObserver监测子元素的添加或移除，并在变化发生后进行相应的处理：
// 目标元素const targetElement = document.querySelector('target'); // 创建一个MutationObserver实例const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'childList') { mutation.addedNodes.forEach((addedNode) => { console.log(`添加了子元素：${addedNode.nodeName}`); // 执行相应的处理逻辑 }); mutation.removedNodes.forEach((removedNode) => { console.log(`移除了子元素：${removedNode.nodeName}`); // 执行相应的处理逻辑 }); } });}); // 配置观察器const config = { childList: true,}; // 启动观察器 observer.observe(targetElement, config);
在上述代码中，我们创建了一个MutationObserver实例，并将观察器配置为监测子元素的添加或移除。当目标元素的子元素发生添加或移除操作时，MutationObserver的回调函数将被调用，并传递一个mutations参数，该参数包含了所有发生的变化。在回调函数中，我们可以根据变化的类型（mutation.type）为childList来判断子元素的添加或移除操作，并执行相应的处理逻辑。
带你读《现代Javascript高级教程》三十、MutationObserver：监测DOM变化的强大工具（3）https://developer.aliyun.com/article/1349493?groupCode=tech_library
