如何有效率地檢測網頁元素是否存在？

找出元素的存在

在 Web 開發領域，經常需要確定特定元素何時出現在網頁。確定這個存在點對於有效地與該元素互動至關重要。

元素檢測的最佳實踐

在尋求檢測元素是否存在的最佳方法時，出現了幾種方法：

1。 MutationObserver：

此方法特別有利，因為它：

• 不依賴jQuery 或第三方庫
• 採用基於Promise 的結構，促進與async /await 語法的相容性
• 利用MutationObserver API，用於即時監控DOM變化

使用waitForElm() 函數實作：

const waitForElm = (selector) =>; {
傳回新的Promise(resolve => {
if (document.querySelector(selector)) {
回傳resolve(document.querySelector(selector));
}

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

observer.observe (document.body, {

observer.observe (document.body, {

observer.observe (document.body, {

observer.observe (document.body, {

observer.observe (document.body, {childList: true,

子樹: true

});
});

};

async/await 的範例用法：const elm = wait waitForElm('.some-class');console.log(elm.textContent);此技術提供了一種高效且直接的方法來檢測網頁上元素的外觀，允許Web 應用程式中的無縫互動和動態功能。

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