7.4 MutationObserver

MutationObserver 是一种 JavaScript API，允许开发人员异步观察网页的 DOM（文档对象模型）更改。使用 MutationObserver，开发人员可以注册一个回调函数，每当 DOM 发生更改时，该函数将被执行。这些更改可以包括元素、属性或文本节点的添加、删除或修改。要使用 MutationObserver，开发人员创建一个 MutationObserver 类的实例，并调用其 observe() 方法，将要观察的目标元素和指定要观察的更改类型的配置对象传递进去。配置对象包括选项，例如 childList（观察目标的子元素的更改）、attributes（观察目标的属性更改）和 characterData（观察文本节点的更改）。当检测到更改时，构造函数中指定的回调函数将被调用，传递一个包含 MutationRecord 对象的数组，每个对象描述一个发生的单个更改。MutationRecord 对象包括有关更改类型、受影响的节点和任何相关数据的信息。 MutationObserver 是创建响应用户交互和其他事件的动态 Web 应用程序的强大工具。它可以用于广泛的目的，例如响应数据的更改以更新 UI。

MutationObserver 构造函数

MutationObserver 构造函数用于创建 MutationObserver 对象实例。它接受一个回调函数作为参数，该函数将在指定的 DOM 更改发生时被调用。构造函数的语法如下： new MutationObserver(callback); 其中，callback 是一个函数，它将在 DOM 更改时被调用。该函数接受两个参数： 1 mutations：一个 MutationRecord 对象的数组，它描述了 DOM 中发生的更改。 2 observer：一个 MutationObserver 对象，它是调用回调函数的 MutationObserver 实例。

MutationObserver.prototype.observe()

MutationObserver.ptototype.observe() 方法用于指定要观察的目标元素和要观察的更改类型的配置对象，并开始观察。该方法接受两个参数： 1 target：要观察的目标元素。 2 options：一个配置对象，用于指定要观察的更改类型。配置对象可以包含以下选项： 1 childList：布尔值，指定是否观察目标元素的子元素列表的变化。 2 attributes：布尔值，指定是否观察目标元素的属性的变化。 3 characterData：布尔值，指定是否观察目标元素的文本内容的变化。 4 subtree：布尔值，指定是否观察目标元素的所有后代节点，而不仅仅是其直接子元素。例如，以下代码创建一个 MutationObserver 实例，用于观察某个元素的子元素列表变化：

const targetNode = document.getElementById('target');
const config = { childList: true };

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

observer.observe(targetNode, config);

在这个示例中，我们创建了一个 MutationObserver 实例，并指定要观察的目标元素是 targetNode，要观察的更改类型是子元素列表的变化。当发生指定的更改时，MutationObserver 将调用回调函数，其中每个 MutationRecord 对象将描述发生的单个更改。

MutationObserver.prototype.disconnect()

MutationObserver.disconnect() 方法用于停止 MutationObserver 实例的观察。该方法没有参数，调用它将停止对目标节点的观察。如果你希望再次开始观察，需要再次调用 MutationObserver 的 observe() 方法。例如，以下代码演示了如何使用 disconnect() 方法停止 MutationObserver 的观察：

const targetNode = document.getElementById('target');
const config = { childList: true };

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

observer.observe(targetNode, config);

// 停止观察
observer.disconnect();

在这个示例中，我们创建了一个 MutationObserver 实例并开始观察指定的目标元素。然后，我们调用 disconnect() 方法停止观察。如果之后需要再次观察，可以再次调用 observe() 方法重新开始观察。

MutationRecord 对象

在 MutationObserver 中，MutationRecord 对象表示一个 DOM 变化的记录。每个 MutationRecord 对象描述了一个单一的 DOM 变化，例如元素的插入、删除、属性的变化等。 MutationRecord 对象包含以下属性： 1 type：表示变化的类型，可能的值包括 "attributes"、"characterData"、"childList"。 2 target：表示发生变化的 DOM 节点。 3 addedNodes：如果 type 为 "childList"，则该属性是一个包含新增节点的 NodeList。 4 removedNodes：如果 type 为 "childList"，则该属性是一个包含删除节点的 NodeList。 5 previousSibling：如果 type 为 "childList" 或 "attributes"，则该属性是被添加或被修改的节点的前一个兄弟节点。 6 nextSibling：如果 type 为 "childList" 或 "attributes"，则该属性是被添加或被修改的节点的下一个兄弟节点。 7 attributeName：如果 type 为 "attributes"，则该属性是被修改的属性的名称。 8 oldValue：如果 type 为 "attributes" 或 "characterData"，则该属性是被修改或删除的属性或节点的旧值。以下是一个示例，演示如何使用 MutationRecord 对象：

const observer = new MutationObserver((mutations, observer) => {
  mutations.forEach((mutation) => {
    console.log(`Mutation of type ${mutation.type} on ${mutation.target}`);
    console.log(`Added nodes: ${mutation.addedNodes.length}`);
    console.log(`Removed nodes: ${mutation.removedNodes.length}`);
  });
});

const target = document.getElementById('target');
observer.observe(target, { childList: true });

在这个示例中，我们创建了一个 MutationObserver 实例，并使用 observe() 方法指定要观察的目标节点以及要观察的变化类型。在回调函数中，我们遍历所有的 MutationRecord 对象，并输出它们的属性，包括变化的类型、目标节点、新增节点的数量以及删除节点的数量。注意，MutationRecord 对象是只读的，你不能修改它们的属性。

第七章DOM 7.4 MutationObserver

7.4 MutationObserver

MutationObserver 构造函数

MutationObserver.prototype.observe()

MutationObserver.prototype.disconnect()

MutationRecord 对象