getElementsByClassNameを使用すると、cssのクラス名を指定してクラス名が含まれている要素を一括してすべて取得することが可能です。

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

See the Pen getElementsByClassNameで要素を一括でまとめて取得する by Makoto Ohnami (@zohnami) on CodePen.

まずはhtmlを見てみましょう。

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

3番目のboxにはbox-specialというクラスも追加されていてクラスが複数設定されていることになりますが、これも対象になります。

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

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

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

querySelectorAll とは違ってクラス名を引数に指定するときに.(ドット)は不要です。

また、forEachが使えません(！)

そのため、forを使用してboxListの中身をひとつずつ取得して色を変更するようにしています。

const boxList = document.getElementsByClassName('box');

// 注意！ getElementsByClassNameの取得結果はforEachは使えない！

// boxList.forEach((box) => {
//   box.style.color = 'red';  
// });

for(let i = 0; i < boxList.length; i++) {
  boxList[i].style.color = 'red';    
}

紹介しておいてですが、getElementsByClassNameはあまり使用しない気がします。

コードを書くときは要素の取得方法について、ある程度ルールを決めておくとよいでしょう。

querySelectorを使う、と決めたら基本的には常にquerySelectorを使う、みたいな感じで統一をしておくとコードが読みやすく保守しやすくなるでしょう。

引数を設定するときにドットやシャープが必要なものと不要なものとそれぞれ存在するので、使用する関数をある程度統一しておくとコードの書き間違えも減るかなと思います。

この記事の環境情報

  • Google Chrome 108.0.5359.124