querySelector, querySelectorAll でCSSセレクターの条件に合う要素を取得

querySelector()、 querySelectorAll() は、CSSのセレクター（クラスや属性など）から任意の要素を取得することができる JavaScript のメソッドです。

この記事はこれらの使い方メモです。どのように取得するのか、確認しながらまとめていきます。

querySelectorの基本

JavaScriptでHTML要素を取得するには、”querySelector” の他、”getElement” から始まるいくつかのメソッドがあります。

getElement系メソッドの場合、 idで取得するなら getElementById、classなら getElementsByClassName を使用するといった感じで、それぞれ取得したい属性に対してメソッドを使い分ける必要があります。

querySelector はCSSセレクターで要素を指定できるため、getElementのようにいくつものメソッドを使い分ける必要はなく、さまざまな属性値を指定できます。またセレクターを指定してより細かく要素を指定することができるのも querySelector の特徴です。

基本の書き方

querySelector() の基本的な書き方は以下の形です。

document.querySelector("CSSセレクタ");

document.querySelector("CSSセレクタ");

querySelectorAll() も同じような書き方で、メソッド部分だけ変更すればOK。

document.querySelectorAll("CSSセレクタ");

document.querySelectorAll("CSSセレクタ");

セレクターの指定

querySelector() や querySelectorAll() で要素を取得する条件は、idなら #id classなら .class 、HTMLタグなら div h1 と、CSSでスタイルを当てるのと同様の書き方で指定できます。

ここではいくつかの例をご紹介します。

querySelector と querySelectorAll どちらを使うか

querySelector() は、指定されたセレクターがその要素内で最初に一致した要素を返します。要素を見つけたらその時点でプログラムは終了です。
そのため、同じセレクターの要素があっても初めの一つしか取得することができません。

そのため、複数の要素を取得したい場合は querySelectorAll() を使用します。

例えば、以下のように同じクラス名を持つ要素が複数あるとします。

<ul>
  <li class="target">リスト１</li>
  <li class="target">リスト２</li>
  <li class="target">リスト３</li>
  <li class="">リスト４</li>
</ul>

<ul>
  <li class="target">リスト１</li>
  <li class="target">リスト２</li>
  <li class="target">リスト３</li>
  <li class="">リスト４</li>
</ul>

querySelector() を使って、テキストカラーを変更しようとします。

const target = document.querySelector(".target");
target.style.color = 'red';

const target = document.querySelector(".target");
target.style.color = 'red';

この場合、JSで指定したカラーが適用されるのは「リスト１」のみです。

querySelectorAll() を使うと、「target」クラスが当たっているリストテキスト全てに適用されます。

const target = document.querySelectorAll(".target");
target.forEach(function(value) {
  value.style.color = 'red';
});

const target = document.querySelectorAll(".target");
target.forEach(function(value) {
  value.style.color = 'red';
});

実装したサンプルはこちら

• querySelector() …最初の一つだけ取得
• querySelectorAll() …全ての要素を取得

• IDで指定する場合や特定の要素のみを取得したい場合は querySelector() （こちらの方が処理が早く短いコードで済む）。
• 複数の要素を取得したい場合は、querySelectorAll()
• id属性を持つ複数の要素を一度に取得したい場合も、querySelectorAll()

querySelectorAll() で取得した要素を一つずつ処理する

querySelectorAll() で取得した要素は、配列に似たデータ構造が格納されます。そのため、各要素を1つずつ処理するために「forEach」を使います。

const target = document.querySelectorAll(".target");
target.forEach(function(value) {
  value.style.color = 'red';
});

const target = document.querySelectorAll(".target");
target.forEach(function(value) {
  value.style.color = 'red';
});

全ての要素を取得しつつ、一つの要素のみに何かしたい場合はインデックスを指定すると、要素内の一つを取得することができます。

let target = target.item(0);
// 以下の形でも取得可能
let target = target[0];

let target = target.item(0);
// 以下の形でも取得可能
let target = target[0];

取得した要素の数を取得する場合は length 。

let target = target.length;

let target = target.length;