jsのquerySelectorAllについての質問

Question

下記のスクリプトで、出力が「1」ではなく「2」になるのはなぜですか？
3階層目のspanを指定しているので「1」が私が期待する値なのですが、そうなりません。

<span id="test">
	<span>
		<span></span>
	</span>	
</span>
<script>
var test = document.getElementById('test');
var list = test.querySelectorAll('span > span');
alert(list.length);
</script>

Comments

[退会済みユーザー]

セレクタを span > span > span にすると 1 になると思います。その結果から、span > span だと2になる理由を考えてみるとよいかもしれません

Answer 1

https://developer.mozilla.org/ja/docs/Web/API/Element/querySelectorAll
を読むと「ユーザーのメモ」という部分にその理由を書いています。

document.querySelectorAll('span > span');
だと２階層目と３階層目の<span>にヒットします。
でその２階層目と３階層目の<span>はどちらも
document.getElementById('test');
内の要素になるので両方対象になる。
という事みたいですね。

Comments

[CTRL-S]

補足

test.querySelectorAll(':scope span > span');
とすると指定要素の子孫要素に限定できます。
https://developer.mozilla.org/ja/docs/Web/CSS/:scope

[msiqb]

ありがとうございました。
理解できました。

Answer 2

たとえばこうするとイメージしやすいかも

<span id="s1">
<div id="test">
<span id="s2">
<span id="s3"></span>
</span>	
</div>
<span id="s4">
</span>	
</span>	
<script>
var list = test.querySelectorAll('span span');
console.log(list);
</script>

上記 #2と#3がヒットします
つまり、#test内にあるspanの内、上位にspanがある要素をノードリスト化しているわけです
（#s2にとってtestより上位にある#s1が存在するからヒットする）
命題にもどりspan > spanであれば、spanの内、直接の親要素がspanのものは2つ存在するわけです

Comments

[msiqb]

ありがとうございました。
理解できました。
ベストアンサーは先にご回答いただいた方にさせていただきました