JavaScript MutationObserver 函数

MutationObserver 接口提供了跟踪 DOM 树修改的能力。它旨在取代 DOM3 Events 定义中已包含的旧 Mutation Events 功能。

在复杂的 Web 项目中，DOM 经常会发生变化。因此，有时您的应用程序可能需要对 DOM 的特定修改做出响应。可以通过 MutationObserver 接口来监听 DOM 变化。

JavaScript MutationObserver 语法

• MutationObserver 的使用很简单。第一步是使用回调函数创建一个观察者，如下所示：

• 下一步是将其添加到 DOM 节点，如下所示：

Config 是一个对象，其中包含定义要响应的更改的参数，由函数返回。

• childList: 节点直接子项的更改。
• subtree: 节点的每个后代。
• attributes: 节点的特性。
• attributeFilter: 一个属性名称列表，允许您查看所需的属性。
• characterData: 用于节点观察。

回调函数在任何修改后执行。观察者成为第二个参数，修改作为 MutationRecord 对象列表传递给第一个参数。

如何操作 JavaScript MutationObserver

要使用 MutationObserver API，您必须首先

• 首先必须定义当 DOM 更改时将调用的回调方法。

• 接下来，使用 MutationObserver() 方法创建一个 MutationObserver 对象并将回调函数传递给该对象。

let observer = new MutationObserver(callback);

• 第三，通过调用 observe() 方法开始跟踪 DOM 更改。

observer.observe(targetNode, observerOptions);

observe() 函数有两个参数。target 是需要监视更改的节点子树的根。observerOptions 参数中的参数指定了应将哪些 DOM 更改通知给观察者的回调函数。

• 调用 disconnect() 方法以结束对 DOM 更新的监视。

observer.disconnect();

示例

以下示例显示了具有不同类型数据的 javascript mutationobserver api。

示例 1

以下示例显示了带有简单信息的 JavaScript mutationobserver 基本 api。

输出

下图显示了基本的 JavaScript mutationobserver 输出。

输出 1

在输入字段中插入字符

输出 2

插入字符后

示例 2

以下示例显示了带有 false 选项的基本 JavaScript mutationobserver api。

输出

下图显示了基本的 JavaScript mutationobserver 输出。

JavaScript MutationObserver 选项

您可以通过将选项作为 observe() 方法的第二个参数传递来定义它们来表征 MutationObserver。

并非所有选项都必须选择。但是，至少必须将 childList、attributes 或 characterData 设置为 true，MutationObserver 才能正常工作；否则，observer() 方法将返回错误。

MutationRecord 对象包含以下属性：

• type: 变异的类型。它是“characterData”、“attributes”或“childList”。
• target: 更改发生的位置。
• addedNodes/removedNodes: 新添加或移除的节点。
• 添加或移除的节点的 previousSibling 或 nextSibling，分别。
• attributeName/attributeNamespace: 属性的新名称或命名空间。
• oldValue: 仅当 attributeOldValue/characterDataOldValue 设置为匹配选项时，文本或属性更改的先前值。

示例

以下示例显示了带有多个选项的基本 JavaScript mutationobserver api。

输出

下图显示了基本的 JavaScript mutationobserver 输出。

观察子元素的变化

mutation 方法可以显示子元素的开始、停止、添加和移除功能。以下步骤有助于显示函数子元素的变化。

• 在这里，我们可以创建 HTML 中数据的列表。

• 在 HTML 中为功能创建按钮。

• 使用 JavaScript 的 querySelector 创建按钮和数据标签的变量。

使用 mutation 函数和带有变量的回调

• 使用 mutationobserver 变量和 JavaScript 函数添加所需的操作。

示例

以下示例显示了具有不同操作的子列表及其数据。

示例 1

该示例显示了父元素子元素的基本变化。

输出

下图显示了带有子元素的 JavaScript mutationobserver 的输出。

输出 1

点击开始按钮

输出 2

点击停止按钮

示例 2

该示例显示了向父元素子元素中插入数据。

输出

给出的图片显示了带有子元素的 JavaScript mutationobserver 的输出。

输出 1

在插入最后一个元素之前

输出 2

插入最后一个元素之后

示例 3

该示例显示了父元素子元素中已删除的数据。

输出

给出的图片显示了已删除列表中最后一个值的输出。

输出 1

在移除最后一个元素之前

输出 2

移除最后一个元素之后

请记住 mutationObserver 的关键细节。

• 回调函数（我将其命名为 mCallback，以表明您可以为其指定任何名称）将在每次发现有效变异以及 watch() 方法完成后激活。
• 由于 childList 是唯一可接受的“类型”的变异，因此在遍历 MutationRecord 时搜索它是有意义的。在这种情况下，搜索任何其他类型都是无用的。
• 可以使用 childList 向目标元素添加或移除文本节点，这也将计入。这意味着无需添加或移除元素。

结论

JavaScript mutationobserver 方法会观察并操作列表。在这里，我们可以使用多种选项来操作列表及其子数据。