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 的浏览器中加载。

另请参见