MutationObserver API：DOM 变化的敏锐观察者

2023-11-02 09:10:16

好的，以下是关于 MutationObserver API 的文章。

MutationObserver API 简介

MutationObserver API 是一个 JavaScript API，用于监听和响应 DOM 树中元素或属性的变更。它可以帮助你轻松地检测和处理网页上的动态变化，实现交互性更强、响应更快的 Web 应用程序。

MutationObserver API 的工作原理是，你创建一个 MutationObserver 对象，并指定你想要监听的 DOM 元素或属性。当这些元素或属性发生变化时，MutationObserver 对象就会触发一个回调函数，你可以在其中处理这些变化。

MutationObserver API 提供了非常丰富的事件类型，包括：

childList：子元素发生变化，例如元素被添加、删除或重新排列。
attributes：元素的属性发生变化，例如元素的类名或样式发生改变。
characterData：元素的文本内容发生变化。

MutationObserver API 的使用

MutationObserver API 的使用非常简单。首先，你需要创建一个 MutationObserver 对象，并指定你想要监听的 DOM 元素或属性。然后，你需要指定一个回调函数，当这些元素或属性发生变化时，MutationObserver 对象就会触发这个回调函数。

const observer = new MutationObserver((mutationsList, observer) => {
  for (const mutation of mutationsList) {
    console.log(`Mutation type: ${mutation.type}`);
    console.log(`Target node: ${mutation.target}`);
    console.log(`Added nodes: ${mutation.addedNodes}`);
    console.log(`Removed nodes: ${mutation.removedNodes}`);
    console.log(`Changed attribute: ${mutation.attributeName}`);
    console.log(`Old attribute value: ${mutation.oldValue}`);
    console.log(`New attribute value: ${mutation.newValue}`);
  }
});

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