如何使用 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中文網其他相關文章！