觀察 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中文網其他相關文章！
