如何高效检测网页元素是否存在？

查找元素的存在

在 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, {
childList: true,
子树: true
});
});
};

async/await 的示例用法：

const elm = wait waitForElm('.some-class');
console.log(elm.textContent);

此技术提供了一种高效且直接的方法来检测网页上元素的外观，允许Web 应用程序中的无缝交互和动态功能。

以上是如何高效检测网页元素是否存在？的详细内容。更多信息请关注PHP中文网其他相关文章！