探秘 MutationObserver：揭秘 JavaScript 检测 DOM 变化的利器

前端

2023-11-14 07:18:06

JavaScript 工作原理之十：使用 MutationObserver 监测 DOM 变化

网络应用日益复杂，这导致难以预测其生命周期中指定时刻准确的交互界面。

MutationObserver 是一种用于监视 DOM 更改的 JavaScript API。它允许您在发生更改时侦听和响应这些更改。这对于创建实时更新的应用程序和优化应用程序性能非常有用。

MutationObserver 有两个主要方法：

observe()：此方法用于开始观察 DOM 元素。您可以指定要观察哪些类型的更改，例如添加或删除子节点、更改属性或更改节点的文本内容。
disconnect()：此方法用于停止观察 DOM 元素。

MutationObserver 还具有一个名为 MutationRecord 的对象，它包含有关 DOM 更改的信息。MutationRecord 对象具有以下属性：

type：更改的类型，例如 "childList"、"attributes" 或 "characterData"。
target：更改的目标元素。
addedNodes：如果更改涉及添加子节点，则此属性将包含已添加的节点。
removedNodes：如果更改涉及删除子节点，则此属性将包含已删除的节点。
previousSibling：如果更改涉及添加或删除子节点，则此属性将包含更改前目标元素的前一个同级元素。
nextSibling：如果更改涉及添加或删除子节点，则此属性将包含更改后目标元素的下一个同级元素。
attributeName：如果更改涉及更改属性，则此属性将包含已更改的属性的名称。
oldValue：如果更改涉及更改属性，则此属性将包含属性的旧值。
newValue：如果更改涉及更改属性，则此属性将包含属性的新值。

以下是使用 MutationObserver 监视 DOM 更改的示例：

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    console.log(mutation.type);
    console.log(mutation.target);
  }
});

observer.observe(document.body, {
  childList: true,
  attributes: true,
  characterData: true,
  subtree: true
});