querySelector() 和 querySelectorAll()[0] 的区别

Question

我运行跨一些 JS 代码使用以下 select 多个节点中的第一个。

querySelectorAll()[0]

下面是不是在做同样的事情？

querySelector()

使用querySelectorAll()[0]有优势吗？

Answer 1

两个表达式将return得到完全相同的结果。

唯一的区别是 querySelectorAll()[0] 将首先找到所有匹配选择器的项目，然后索引第一个项目。而 querySelector() 将在找到第一个元素后 "short circuit"。

因此，理论上，querySelector() 可能比 querySelectorAll()[0] 稍微更有效率。但是，它们的行为是相同的。

Answer 2

它们都导致相同的结果，但它们采用不同的路径（字面和比喻）到达那里。在您的示例中，.querySelector() 是正确的方法，因为 .querySelectorAll() 会在只需要使用第一个匹配项时扫描调用该方法的整个元素，从而导致更多的性能损失。

.querySelectorAll() 的优点是您可以缓存对整组匹配元素的引用，然后根据需要对它们进行索引或循环。因此，如果需要第一个匹配元素，但代码中的其他地方需要整个集合，那么 .querySelectorAll(<<selector>>)[0] 就有意义了。

Difference between querySelector() and querySelectorAll()[0]