ネストされた一連の DOM 要素がありul > li > ul > li
、セレクターli
を単独で使用している場合、Sizzle を実行するかdocument.querySelectorAll
、要素が返される順序を定義しますか?
返される順序には、「最上位が最初」、「葉ノードが最初」、または単に「ドキュメント順」が含まれますが、どれを指定するために書き留められたものを見たことがありません。
ネストされた一連の DOM 要素がありul > li > ul > li
、セレクターli
を単独で使用している場合、Sizzle を実行するかdocument.querySelectorAll
、要素が返される順序を定義しますか?
返される順序には、「最上位が最初」、「葉ノードが最初」、または単に「ドキュメント順」が含まれますが、どれを指定するために書き留められたものを見たことがありません。
まあ、それは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"]