MutationObserver
**MutationObserver
** 接口提供了监视对 DOM 树进行的更改的功能。它被设计为更旧的 Mutation Events 功能的替代品,该功能是 DOM3 Events 规范的一部分。
构造函数
MutationObserver()
-
创建并返回一个新的
MutationObserver
,当发生 DOM 更改时,它将调用指定的回调函数。
实例方法
disconnect()
-
停止
MutationObserver
实例接收进一步的通知,直到observe()
被再次调用。 observe()
-
配置
MutationObserver
以便在发生与给定选项匹配的 DOM 更改时,通过其回调函数开始接收通知。 takeRecords()
-
从
MutationObserver
的通知队列中删除所有挂起的通知,并将它们返回到一个新的Array
中,该数组包含MutationRecord
对象。
Mutation Observer & 自定义调整大小事件监听器 & 演示
示例
以下示例改编自 这篇博文。
js
// Select the node that will be observed for mutations
const targetNode = document.getElementById("some-id");
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
for (const mutation of mutationList) {
if (mutation.type === "childList") {
console.log("A child node has been added or removed.");
} else if (mutation.type === "attributes") {
console.log(`The ${mutation.attributeName} attribute was modified.`);
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
规范
规范 |
---|
DOM 标准 # interface-mutationobserver |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。