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

Question

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

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

Answer 1

嗯，MDN documentationdocument.querySelectorAll 里说得很清楚：

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

W3 DOM documentation 给出了相同的描述：

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