前回はquerySelectorを使用して条件に一致した要素をひとつだけ取得するということをやりました。

今回のdocument.querySelectorAllを使うと、タグに書かれているクラス名などを条件として指定して該当する要素をすべて取得することができます。

引数はquerySelectorのときと同じ、クラス名やhtmlの要素などを柔軟に指定できるのがよいところです。

早速サンプルを紹介します。サンプルの中では.boxというクラス名を指定して、class = 'box'に該当するタグの文字色をすべて変更しています。

See the Pen querySelectorAllで要素を全て取得する by Makoto Ohnami (@zohnami) on CodePen.

まずはhtmlを見てみましょう。とりあえず、前半部分です。

box1〜3にそれぞれboxというクラスが設定されています。

<div class="container">
  <div class="box" id="box1">
    box1
  </div>
  <div class="box" id="box2">
    box2
  </div>
  <div class="box" id="box3">
    box3
  </div>
</div>

次はjavascriptを見てみましょう。

以下のようにquerySelectorAll('.box')でclass = 'box'の要素をすべて取得してboxListという定数に配列として複数格納しています。

その後はforEachを使ってboxのタグ内の文字列の色を赤色に変えています。

同時に変更したい要素が複数あればあるほどquerySelectorAllは便利ですね。

const boxList = document.querySelectorAll('.box');
boxList.forEach((box) => {
  box.style.color = 'red';
});

さて、もうひとつやってみましょう。

今度はquerySelectorAllを使って要素を複数取得した後に、要素それぞれに異なる背景色に変更してみようと思います。

htmlの二つ目の.container配下にはクラス名を以下のようにclass="box bottom"と指定しています。

<div class="container">
  <div class="box bottom" id="box4">
    box4
  </div>
  <div class="box bottom" id="box5">
    box5
  </div>
  <div class="box bottom" id="box6">
    box6
  </div>
</div>

サンプルコードの中のjavascriptの後半部分です。

まず、colorListに背景色の配列を設定しておきます。

あとは、querySelectorAllで取得した配列からforのループ内でひとつずつ要素を取得してそれぞれ別の背景色を設定しています。

// 背景色に利用する色を配列としてまとめておく
const colorList = ['#f5deb3', '#f0fff0', '#bdb76b'];

// querySelectorAllで対象を全て取得する
const boxBottomList = document.querySelectorAll('.bottom');

// 取得した要素ごとに背景色を入れ替えていく
for (let i = 0; i < boxBottomList.length; i++) {
  boxBottomList[i].style.backgroundColor = colorList[i];
};

querySelectorでひとつずつやるよりも場合によってはJavaScriptのコードが短くなり、見やすく保守しやすいコードがかけるようになると思います。

この記事の環境情報

  • Google Chrome 108.0.5359.124