jquery - 嘶嘶声和/或 querySelectorAll - 嵌套元素的枚举顺序？

Question

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

可能返回的顺序包括“最先”、“叶节点在前”或“按文档顺序”，但我从未见过任何写下来指定哪个顺序。

Answer 1

嗯，在MDN 文档中非常清楚地说明了document.querySelectorAll：

返回文档中与指定选择器组匹配的元素列表（使用文档节点的深度优先前序遍历）。

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

Document、DocumentFragment 和 Element 接口上的 querySelectorAll() 方法必须返回一个 NodeList，其中包含上下文节点的子树中所有匹配的 Element 节点，按文档顺序排列。[...] 术语“文档顺序”是指对所讨论的 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"]