MutationObserver 如何有效率地處理 Javascript 中的元素存在？

使用 MutationObserver 等待 Javascript 中元素存在

在 Web 開發中，經常需要等待元素出現或消失在與頁面互動之前。這種情況在自動化測試和動態 Web 應用程式中經常出現。

有多種方法可以解決此問題。一種方法涉及設定一個時間間隔來連續檢查元素是否存在。然而，這種方法可能效率低下並會引入效能問題。

解決方案：MutationObserver

更有效的解決方案是利用 MutationObserver API。這個 API 使我們能夠觀察 DOM 的變化並做出相應的回應。以下程式碼片段示範如何使用MutationObserver 等待元素出現：

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                observer.disconnect();
                resolve(document.querySelector(selector));
            }
        });

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

用法：

要使用此功能，只需傳遞CSS 選擇器即可您想要等待的元素。它會傳回一個 Promise，一旦元素出現在 DOM 中，該元素就會解析。

waitForElm('.some-class').then((elm) => {
    console.log('Element is ready');
    console.log(elm.textContent);
});

MutationObserver 的優點：

• 非侵入性: 它不會幹擾其他Javascript
• 非侵入性: 它不會幹擾其他Javascript
非侵入性:
• 它不會幹擾高效率：僅在DOM 變更時觸發。

徹底：它檢測元素本身及其內部的變化

結論：使用MutationObserver存在是一個健壯且高效的解決方案，無需輪詢並確保元素檢索準確。它是自動化測試、動態 Web 開發以及任何需要回應 DOM 變更的情況的必備工具。

以上是MutationObserver 如何有效率地處理 Javascript 中的元素存在？的詳細內容。更多資訊請關注PHP中文網其他相關文章！