JavaScript MutationObserver监听DOM元素详解

2023-11-08 03:06:54

MutationObserver接口可以通过异步的方式监听和响应DOM中的变化。作为一名经验丰富的JavaScript开发人员，我已熟知其工作原理。DOM中的任何变化，比如节点的添加、删除、文本内容的改变都会触发回调函数。

监听器类型

MutationObserver支持五种不同类型的监听器：

attributes : 属性变化。
characterData : 文本内容变化。
childList : 子节点变化。
subtree : 子树变化。
all : 所有变化。

例如，我们可以创建如下MutationObserver来监听

元素的属性变化：

const div = document.getElementById('div');
const observer = new MutationObserver((mutations, observer) => {
  console.log(mutations);
});
observer.observe(div, {
  attributes: true,
});

MutationObserver提供了三个方法：

observe() ：开始监听指定DOM元素。
disconnect() ：停止监听指定DOM元素。
takeRecords() ：获取并清除所有已记录的变化。

MutationObserver是一个强大的工具，它可以让我们轻松地监听DOM中的变化，并做出相应的处理。

实例

我们来看一个简单的例子。我们有一个<div>元素，它包含一些文本。我们想要监听这个<div>元素文本内容的变化。我们可以使用MutationObserver来实现这个功能。

const div = document.getElementById('my-div');

// 创建一个新的MutationObserver实例
const observer = new MutationObserver((mutations, observer) => {
  // 循环遍历所有已记录的变化
  mutations.forEach((mutation) => {
    // 如果变化的类型是'characterData'
    if (mutation.type === 'characterData') {
      // 输出变化后的文本内容
      console.log(mutation.target.textContent);
    }
  });
});

// 开始监听`<div>`元素的文本内容变化
observer.observe(div, {
  characterData: true
});

// 改变`<div>`元素的文本内容
div.textContent = 'Hello, MutationObserver!';