el.querySelectorはセレクタに自身を含めて検索できる

  • 2
    いいね
  • 3
    コメント
この記事は最終更新日から1年以上が経過しています。

はじめに

ある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')
> []

参考