querySelector内で自身を書きたい時

クラス名がある場合やidが振ってあれば問題ないですが、直接「div」「p」と指定しなくてはいけない際不便なことがあると思います。

例えば以下のような形。

<div class="sample">
  <div>
    <div>ひとつ</div>
    <div>ふたつ</div>
  </div>
  <div>みっつ</div>
  <div>よっつ</div>
</div>

const sample = document.querySelector( '.sample' );

const div = sample.querySelectorAll( 'div' );

console.log( div );

// NodeList(5) [div, div, div, div, div]

「.sample」直下の「div」を取得したいけど、全部返ってきてしまっていますね。

「document.querySelector( ‘.sample > div’ )」とすれば良いわけですが、DOMが深くなってくると変数の「sample」を使用した形で指定したいこともあります。

そんなときに便利なのが、セレクターが選択する参照点の要素を示してくれる「:scope」というものです。

早速使用例を見ていきます。

先程と同じHTMLでjavascriptのみ変更していきます。

const sample = document.querySelector( '.sample' );

const div = sample.querySelectorAll( ':scope > div' );

console.log( div );

// NodeList(3) [div, div, div]

セレクターの文字列内に直接「:scope > div」のように記述しています。

上記の例だとクラス「sample」直下の「div」要素のみ取得するように変更されています。

直下のdiv要素は３つなので合っていますね。

まとめ

私自身あまり使うことのないものなのですが、つい先日使用することがあったので紹介しました。

WordPressのプラグインなのですが、「要素がjavascriptから生成されている」「javascriptはトランスパイルされている」「クラス名に規則性がない」というものでした。

クラス名に規則性がないので、アップデートでクラス名の変更などありそうな雰囲気…

最上位のidから仕方なく「div」を追うことになり「:scope」へとたどり着くことに。