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 变化的具体信息,从而根据需要进行相应的处理。