querySelector/querySelectorAll中:scope选择器的使用场景与性能等疑问

我在查阅:scope相关文档时曾有困惑：原以为它是将结果限制为元素的子元素，但实际它是把选择器字符串的作用范围限定为该元素的子元素，且排除元素本身。

我有以下几个问题：

• 是否应将elem.querySelectorAll(':scope ...')作为默认用法，除非需要包含基于elem的祖先或DOM更高层级选中的子元素？
• 或者，是否仅当不使用:scope无法得到期望结果时才使用它？
• 换个问法：如果使用或不使用:scope结果始终相同，使用:scope会减少还是增加搜索工作量？
• 另外，elem.querySelector和elem.querySelectorAll是否始终搜索整个文档再限制结果为elem的子元素，而非从elem开始搜索？

问题解答 #

1. 默认用法还是按需使用？ #

不需要把elem.querySelectorAll(':scope ...')当成默认写法。绝大多数场景下，直接调用elem.querySelectorAll('...')就足够——因为这两个方法本身就已经把搜索范围限定在elem的所有后代元素（子元素、孙元素等）里，默认不会匹配elem自身，也不会去elem的祖先或更高层级DOM中查找元素。

:scope是用来处理特殊场景的，比如选择器里包含相对选择器（像>、+、~这类需要明确参照起点的语法）时。举个例子：想找elem的直接子元素.item，写elem.querySelectorAll('> .item')会报错，但elem.querySelectorAll(':scope > .item')就能正常工作——这里:scope明确了>的参照对象是当前的elem。所以结论是：只有当不用:scope就无法实现需求时，再去使用它。

2. 结果相同时的性能差异 #

如果用不用:scope得到的结果完全一致，那么使用:scope会小幅增加搜索工作量。因为浏览器的选择器引擎需要额外解析:scope伪类，确认它的作用范围，多了一层处理逻辑。虽然这点性能损耗在普通页面里几乎感知不到，但没必要平白增加额外开销。

3. 搜索范围的本质 #

elem.querySelector和elem.querySelectorAll不是先搜索整个文档再过滤结果，而是直接以elem为根节点，在它的后代元素中进行遍历搜索。浏览器的DOM选择器引擎会直接限定搜索范围在elem内部，不会触及外部的DOM节点，效率是很高的。

内容的提问来源于stack exchange，提问作者Gary