js：MutationObserver监视 DOM 节点的变化

MutationObserver 接口提供了监视对 DOM 树所做更改的能力。它被设计为旧的 Mutation Events 功能的替代品，该功能是 DOM3 Events 规范的一部分。

文档

• ​​https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver​​

兼容性

示例

<div id="some-id"></div>

<script>// 选择需要观察变动的节点
  const targetNode = document.getElementById("some-id");

  // 观察器的配置（需要观察什么变动）
  const config = {
    attributes: true, // 观察属性变动
    childList: true,  // 观察目标子节点的变化，是否有添加或者删除
    subtree: true,    // 观察后代节点
  };

  // 当观察到变动时执行的回调函数
  const callback = function (mutationsList,) {
    for (let mutation of mutationsList) {
      console.log(mutation);
      
      if (mutation.type === "childList") {
        console.log("A child node has been added or removed.");
      } else if (mutation.type === "attributes") {
        console.log(mutation.attributeName);
      }
    }
  };

  // 创建一个观察器实例并传入回调函数
  const observer = new MutationObserver(callback);

  // 以上述配置开始观察目标节点
  observer.observe(targetNode, config);

  // 之后，可停止观察
  //   observer.disconnect();</script>