Sizzle和/或querySelectorAll - 嵌套元素的枚举顺序？

Question

如果我有一组嵌套的DOM元素,例如ul > li > ul > li我自己使用选择器li,那么做Sizzle还是document.querySelectorAll定义元素返回的顺序？

可能返回的订单包括"最顶层的第一个","叶节点优先",或者只是"按文档顺序",但我从未见过任何记下来指定哪个.

Answer 1

嗯,这是很清楚的说MDN文件为document.querySelectorAll:

返回与指定的选择器组匹配的文档中的元素列表(使用文档节点的深度优先预先遍历遍历).

W3 DOM文档给出了相同的描述:

Document,DocumentFragment和Element接口上的querySelectorAll()方法必须按文档顺序返回包含上下文节点子树中所有匹配的Element节点的NodeList.[...]术语"文档顺序"表示DOM树或相关子树的深度优先预先遍历遍历.

换句话说,给定以下结构:

<div class="a">
  <div class="a-a">
    <div class="a-a-a"></div>    
    <div class="a-a-b"></div>
  </div>
  <div class="a-b">
    <div class="a-b-a"></div>    
    <div class="a-b-b"></div>
  </div>
</div>
<div class="b">
  <div class="b-a">
    <div class="b-a-a"></div>    
    <div class="b-a-b"></div>
  </div>
  <div class="b-b">
    <div class="b-b-a"></div>    
    <div class="b-b-b"></div>
  </div>
</div>

...结果document.querySelectorAll('div')应该是完全按以下顺序的NodeList:

["a", "a-a", "a-a-a", "a-a-b", "a-b", "a-b-a", "a-b-b", 
 "b", "b-a", "b-a-a", "b-a-b", "b-b", "b-b-a", "b-b-b"]