了解 MutationObserver API

Desknumber

在复杂的 Web 应用程序和框架中有时需要监视 的更改。通过解释和交互式演示，本文将向您展示如何使用  来相对轻松地观察 更改。
在复杂的 Web 应用程序中，更改可能很频繁。因此，在某些情况下，您的应用程序可能需要响应 的特定更改。

一段时间以来，寻找 更改的公认方法是通过称为的功能，但现已弃用。批准的 替代品是，我将在本文中详细讨论它。

许多较旧的文章和参考文献讨论了为什么旧功能被替换，因此我不会在 电子邮件营销列表 这里详细介绍（除了我无法公正地做到这一点之外）。该具有近乎完整的浏览器支持，因此如果需要的话，我们可以在大多数（如果不是全部）项目中安全地使用它。复制第一行使用()构造函数创建一个新的。传递到构造函数的参数是一个回调函数，将在每次符合条件的 更改时调用。

确定特定观察者的资格的方法是通过上述代码中的最后一行。在这一点上，我正在使用observe()的方法开始观察。您可以将其与类似的东西进行比较addEventListener()。一旦您附加了侦听器，页面就会“侦听”指定的事件。同样，当您开始观察时，页面将开始“观察”指定的.



Web 表单是每一次有意义的交互的中心。了解 的表单设计模式，这是设计和构建Web表单的实用指南。

跳转至目录 该observe()方法有两个参数：target，它应该是要观察其变化的节点或节点树；和一个选项对象，它是一个允许您定义观察者配置的对象。

a 的最后一个关键基本特征是()方法。这允许您停止观察指定的更改，它看起来像这样：

复制配置 的选项 如前所述， 的方法需要第二个参数来指定描述 的选项MutationObserver。以下是包含所有可能的属性/值对的选项对象的外观：

复制设置选项时，无需包含所有这些行。我将这些只是出于参考目的，以便您可以了解哪些选项可用以及它们可以采用哪些类型的值。正如您所看到的，除了一个之外，其他都是布尔值。

为了使 工作，至少需要将 或之一设置为true，否则将引发错误。其他四个属性与这三个属性之一结合使用（稍后会详细介绍）。

到目前为止，我只是掩盖了语法，以便给您一个概述。考虑每个功能如何工作的最佳方法是提供包含不同选项的代码示例和现场演示。这就是我在本文的其余部分中要做的事情。