[英]document.querySelector is not working with “=” symbol inside the id
[英]document.querySelector inside MutationObserver: good or bad practice?
我正在尝试获得一种能够等到元素已经在 DOM 中的方法。 我已经阅读了几篇关于MutationObserver
的文章,并且我得到了这个方法,它应该可以完成我所需要的:
const waitForElement = async (queryString) => {
return new Promise((resolve) => {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
const nodes = Array.from(mutation.addedNodes);
nodes.forEach((node) => {
console.log('NODE CUSTOM', node);
if (node.matches && node.matches(queryString)) {
observer.disconnect();
resolve(node);
}
});
});
});
observer.observe(document.documentElement, {
childList: true,
subtree: true,
});
});
};
然后,我可以简单地这样使用它:
await waitForElement('#id-of-element');
问题是它实际上没有按预期工作: console.log
只记录“父母”元素,如果要搜索的元素在树的深处,它似乎没有记录它(这被用于更复杂的应用程序,因此它可能与异步调用等有关)。
但是,我发现,我不需要通过突变和节点的 arrays ,而只需要查看实际元素是否在 DOM 中,所以我实现了这个:
const waitForElement = async (queryString) => {
return new Promise((resolve) => {
let element;
const observer = new MutationObserver(() => {
element = document.querySelector(queryString);
if (element) {
observer.disconnect();
resolve(element);
}
});
observer.observe(document.documentElement, {
childList: true,
subtree: true,
});
});
};
这种方法只会在每次突变之后使用querySelector
方法检查元素是否实际上在 DOM 上。 它确实有效(另一个失败了),我发现它更容易阅读和理解,并且中间的循环更少。
这是一个值得推荐的方法吗? 它会影响性能,还是与第一种方法相同?
谢谢!
对选择器的单个查询应该非常、非常、非常快,所以我不认为这是一个问题,但这在很大程度上取决于您使用它的 DOM。测试您的用例以查看是否你发现一个性能问题。
我至少可以指定在 DOM 中查看的位置,而不是在每次更改时都查看整个内容。 这最大限度地减少了对您的突变观察者的调用,并最大限度地减少了它在调用时所做的搜索量。 如果一个特定的用例必须查看整个事情,那么它可以使用documentElement
,但我至少可以避免这种情况。 (也没有理由在实际使用它的 scope 上方的 scope 中声明element
,并且“查询字符串”在 web 中具有特定含义“选择器”或“选择器字符串”。)
以下是您如何做到这一点的想法:
const waitForElement = async (selector, rootElement = document.documentElement) => {
return new Promise((resolve) => {
const observer = new MutationObserver(() => {
const element = document.querySelector(selector);
if (element) {
observer.disconnect();
resolve(element);
}
});
observer.observe(rootElement, {
childList: true,
subtree: true,
});
});
};
可选地接受AbortSignal
也可能是有意义的,这样您就可以停止等待元素,让它拒绝一些适当的“取消”错误。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.