Dom-api MutationObserver使用方法详解

概述

MutationObserver是Web API中的一个对象，用于监视DOM树中发生的变化，并提供回调函数，用于在变化发生时执行相应逻辑。

基本用法

MutationObserver的基本用法如下

// 创建一个观察器实例并指定回调函数
const observer = new MutationObserver(function(mutationsList, observer) {
    // 逻辑处理
});

// 选中需要观察的目标节点
const targetNode = document.querySelector('#target');

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

// 将目标节点与观察器实例链接起来并开始观察
observer.observe(targetNode, config);

// 观察结束 
observer.disconnect();

参数说明

mutationsList: 对所监视的节点树所做的更改组成的 MutationRecord 对象数组。
observer: 观察器实例本身

在调用 observe 方法时，该方法会返回一个 MutationObserver 对象，该对象提供了 disconnect 方法，用于断开当前 observer 对象与观察对象的联系，停止观察。

配置选项

attributes: 是否监控目标节点的属性变化
childList: 是否监控目标节点的子节点变化
subtree: 是否监控目标节点所有子树中的节点变化

MutationRecord对象

MutationRecord 对象，代表单个变化。它包含以下属性：
- type：记录发生的变化类型，有三种类型："attributes"，"childList"和"characterData"
- target：发生变化的节点对象
- addedNodes：如果有新的节点被添加，则该属性包含一个 NodeList 对象
- removedNodes：如果有新的节点被删除，则该属性包含一个 NodeList 对象
- previousSibling：发生变化的节点的前一个兄弟节点
- nextSibling：发生变化的节点的后一个兄弟节点
- attributeName：发生变化的属性名
- oldValue：发生变化的属性或文本节点的旧值

示例

下面有两个例子，用于解释如何使用MutationObserver 对象。

示例 1

此例用于监控指定元素节点的属性变化。

<body>
  <div id="target" class="red" style="font-size: 12px;">Hello World</div>
  <script type="text/javascript">
    const targetNode = document.querySelector('#target');
    const observer = new MutationObserver(function (mutationsList, observer) {
      for (let mutation of mutationsList) {
        if (mutation.type === 'attributes') {
          console.log(`属性 ${mutation.attributeName} 的值由 ${mutation.oldValue} 变为 ${mutation.target.getAttribute(mutation.attributeName)}`);
        }
      }
    });
    observer.observe(targetNode, { attributes: true, attributeOldValue: true });
  </script>
</body>

示例 2

此例用于监控指定元素节点的子节点变化。

<body>
  <ul id="target">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <script type="text/javascript">
    const targetNode = document.querySelector('#target');
    const observer = new MutationObserver(function (mutationsList, observer) {
      for (let mutation of mutationsList) {
        if (mutation.type === 'childList') {
          console.log(`变化类型为 ${mutation.type}，节点 ${mutation.target.nodeName} 的子节点 ${mutation.addedNodes[0].nodeName} 被添加或删除`);
        }
      }
    });
    observer.observe(targetNode, { childList: true });
  </script>
</body>