JavaScript 检测元素数量何时发生变化

在开发 Web 应用程序时，我们通常需要使用 JavaScript 来处理文档对象模型（DOM）。在某些时候，我们需要检测特定元素的数量是否发生了变化。本文将介绍如何使用 JavaScript 检测元素数量的变化。

监听元素的数量

我们可以使用 MutationObserver API 来监听元素的数量变化。该 API 是在 DOM4 规范中引入的，用于监听 DOM 的变化事件。

下面是一个示例，演示如何监听元素数量的变化：

const observer = new MutationObserver((mutationsList) => {
  console.log(mutationsList);
});

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

代码中，我们首先创建了一个 MutationObserver 对象，并传入回调函数。该回调函数将在元素数量发生变化时被触发。我们使用 console.log 将所有变异信息记录到控制台中。

然后，我们调用 observer.observe 方法来启动 MutationObserver。我们将要监视的元素作为第一个参数传递给该方法。在本例中，我们监视文档的 body 元素。我们还将选项对象作为第二个参数传递给该方法，该对象指示我们要监视子元素数量的变化。

检测元素数量变化

通过 MutationObserver 监视元素数量的变化后，我们可以在回调函数中检测元素数量是否发生了变化。在回调函数中，mutationsList 参数包含一个变异数组，其中包含每个变异的信息。

下面是一个示例，演示如何检测元素数量的变化：

const observer = new MutationObserver((mutationsList) => {
  mutationsList.forEach((mutation) => {
    if (mutation.type === 'childList') {
      const numElements = document.querySelectorAll('.my-class').length;
      console.log(`Number of elements: ${numElements}`);
    }
  });
});

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

在这个例子中，我们使用 mutationsList.forEach 方法迭代每个变异。我们使用 mutation.type 属性，检测变异的类型是否为子元素列表的变化。如果确实是，我们使用 document.querySelectorAll 方法获得要监测的元素数量，并将其记录到控制台中。

总结

使用 MutationObserver API 监视元素数量变化，不仅仅可以监视子元素数量的变化，还可以监视其他类型的变化，如元素属性的变化。MutationObserver API 提供了一种有效的方法，可以跟踪 DOM 的变化，并在需要时采取适当的行动。