js监听dom变化

MutationObserver 是 JavaScript 中的一个接口，用于监视 DOM 树的变化。它提供了一种异步方式来跟踪对 DOM 树所做的更改，并在这些更改发生时触发回调函数。MutationObserver 对象会在指定的 DOM 节点上监听指定类型的 DOM 变化，并在这些变化发生时执行回调函数。

例如，你可以使用 MutationObserver 来监视节点的子节点的添加、删除、属性变化等。这对于需要动态地响应 DOM 变化的应用程序和组件非常有用。

下面是一个简单的示例，演示了如何使用 MutationObserver 监视 DOM 的变化：

// 选择要监视的目标节点
var targetNode = document.getElementById('some-element');

// 创建一个新的 MutationObserver 实例，同时指定回调函数
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log('发生了变化：', mutation);
  });
});

// 配置 MutationObserver 监听的内容
var config = { attributes: true, childList: true, subtree: true };

// 启动监听器，传入要监视的节点和配置对象
observer.observe(targetNode, config);

// 在某个时刻停止监听
// observer.disconnect();

 

在 MutationObserver 的回调函数中，mutations 参数是一个 MutationRecord 对象数组。这个数组包含了对触发变化的 DOM 元素进行的所有更改的描述。每个 MutationRecord 对象都表示了一个 DOM 变化。

MutationRecord 对象提供了以下属性来描述 DOM 的变化：

type: 表示 DOM 变化的类型。可能的值包括 "attributes"（属性变化）、"childList"（子节点列表变化）和 "characterData"（字符数据变化）。

target: 表示发生变化的 DOM 元素。

addedNodes: 仅在 type 为 "childList" 时出现，表示添加到 DOM 中的节点列表。

removedNodes: 仅在 type 为 "childList" 时出现，表示从 DOM 中移除的节点列表。

previousSibling: 仅在 type 为 "childList" 时出现，表示变化前节点的前一个同级节点。

nextSibling: 仅在 type 为 "childList" 时出现，表示变化后节点的下一个同级节点。

attributeName: 仅在 type 为 "attributes" 时出现，表示被修改的属性的名称。

oldValue: 仅在 type 为 "attributes" 或 "characterData" 时出现，表示修改前的值。

通过遍历 mutations 数组，可以获取到发生的所有 DOM 变化的具体信息，从而根据需要进行相应的处理。