はじめに
あるDOM要素を起点に querySelector をして、その直下の要素だけを取得したいと思いました。
まずは、素直にこのように書いたのですが、これはエラーになったのでどうすればいいのかな？という話です。
var select = document.querySelector('select.foo');
// "> option" は CSS セレクタの構文として誤っており、エラーになる
select.querySelectorAll('> option');
結論
var select = document.querySelector('select.foo');
// 自身を含んだセレクタを記述できる
select.querySelectorAll('select.foo > option');
// また、ブラウザサポート範囲は不明だが :scope 擬似セレクタ
select.querySelectorAll(':scope > option');
検証
このような HTML を用意し、
<!DOCTYPE html>
<html>
<body>
<ul class="list1">
<li class="item1">list1-item1</li>
</ul>
<ul class="list2">
<li class="item1">list2-item1</li>
<li class="item2">list2-item2</li>
</ul>
</body>
</html>
Chrome の Console で要素抽出をしてみる。
全体から .item1 を抽出：
document.querySelectorAll('.item1')
> [<li class="item1">list1-item1</li>, <li class="item1">list2-item1</li>]
.list1 を起点に .item1 を抽出：
document.querySelector('.list1').querySelectorAll('.item1')
> [<li class="item1">list1-item1</li>]
.list1 を起点に .list1 .item1 を抽出：
document.querySelector('.list1').querySelectorAll('.list1 .item1')
> [<li class="item1">list1-item1</li>]
.list1 を起点に :scope .item1 を抽出：
document.querySelector('.list1').querySelectorAll(':scope .item1')
> [<li class="item1">list1-item1</li>]
.list1 を起点に .list2 .item1 を抽出：
document.querySelector('.list1').querySelectorAll('.list2 .item1')
> []