使用 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 的優點：
徹底：它檢測元素本身及其內部的變化
結論：使用MutationObserver存在是一個健壯且高效的解決方案，無需輪詢並確保元素檢索準確。它是自動化測試、動態 Web 開發以及任何需要回應 DOM 變更的情況的必備工具。以上是MutationObserver 如何有效率地處理 Javascript 中的元素存在？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
