如何使用 MutationObserver 检测 DOM 元素添加？

观察 DOM 中的元素添加

您寻求一种机制，在 DOM 元素添加到网页时触发函数。鉴于您正在开发一个浏览器扩展并且无法访问网页的源代码，您想知道实现此目的的潜在方法。

当您考虑使用 setInterval() 轮询 DOM 时，这种方法不是最理想的，并且计算量大效率低下。幸运的是，有更好的替代方案。

在早期版本的浏览器中，可以使用突变事件来检测 DOM 更改。然而，这些事件已被弃用。因此，现在推荐的解决方案涉及利用 MutationObserver。

MutationObserver 提供了一种有效且高效的方法来观察 DOM 内的更改。它提供了一个简单但功能强大的 API，用于监视特定的突变，包括元素的添加或删除。与轮询不同，MutationObserver 不需要连续的 DOM 扫描，减少了计算开销。

要使用 MutationObserver，您可以实现类似于以下的功能：

<code class="javascript">function checkDOMChange() {
  // Define the type of mutation you're interested in (e.g., element addition)
  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      // Handle element addition here
    });
  });

  // Select the target element you wish to monitor
  var target = document.querySelector('body');

  // Start observing the target element for specific mutations
  observer.observe(target, { childList: true });

  // Optionally, you can terminate the observer when no longer needed
  // observer.disconnect();
}</code>

通过实现 MutationObserver，您可以有效监控元素添加并相应地触发您想要的功能。这种方法消除了持续 DOM 轮询的需要，从而提高了性能和用户体验。

以上是如何使用 MutationObserver 检测 DOM 元素添加？的详细内容。更多信息请关注PHP中文网其他相关文章！