带你读《现代Javascript高级教程》三十、MutationObserver：监测DOM变化的强大工具（3）

带你读《现代Javascript高级教程》三十、MutationObserver：监测DOM变化的强大工具（2）https://developer.aliyun.com/article/1349494?groupCode=tech_library

3） 监测文本节点的内容变化

下面的示例代码演示了如何使用MutationObserver监测文本节点的内容变化，并在变化发生后进行相应的处理：

// 目标元素const targetElement = document.querySelector('target');
// 创建一个MutationObserver实例const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'characterData') {
      console.log(`文本节点内容发生变化：${mutation.target.nodeValue}`);
      // 执行相应的处理逻辑
    }
  });});
// 配置观察器const config = {
  characterData: true,};
// 启动观察器
observer.observe(targetElement, config);

在上述代码中，我们创建了一个MutationObserver实例，并将观察器配置为监测文本节点的内容变化。当目标元素的文本节点的内容发生变化时，MutationObserver的回调函数将被调用，并传递一个mutations参数，该参数包含了所有发生的变化。在回调函数中，我们可以根据变化的类型（mutation.type）为characterData来判断文本节点的内容变化，并执行相应的处理逻辑。

5. MutationObserver的浏览器兼容性

MutationObserver已经在大多数现代浏览器中得到支持，包括Chrome、Firefox、Safari、Edge等。然而，考虑到一些老旧的浏览器版本，建议在使用MutationObserver之前，检查浏览器的兼容性。

可以通过以下链接查看MutationObserver的浏览器兼容性信息：

Can I use MutationObserver?open in new window

6. 总结

MutationObserver是一个强大的工具，用于监测DOM树的变化。通过MutationObserver，我们可以异步地监听DOM元素的增加、删除、属性变化等操作，并在发生变化时执行相应的操作。它在动态内容加载、表单验证、响应式布局、自定义组件开发等场景下发挥重要作用。本文介绍了MutationObserver的属性、应用场景以及使用示例，

7. 参考资料

• MDN Web Docs - MutationObserveropen in new window
  
• DOM Living Standard - MutationObserveropen in new window
  
• Using Mutation Observersopen in new window
  
• DOM Mutation Observers