JavaScriptでページ内の特定のクラスを持つ要素を一括で操作する方法

「セール中は商品カードのバッジ画像を全部差し替えたい」「特定のクラスが付いた要素だけ、まとめて表示を切り替えたい」——ページ内に同じクラスを持つ要素が何十個もある時、1つずつHTMLを書き換えるのは現実的ではありません。JavaScriptなら、同じクラスの要素をまとめて取得し、一括で操作できます。

querySelectorAllで対象の要素をまとめて取得する

まず、操作したい要素をまとめて取得します。今はgetElementsByClassName()よりquerySelectorAll()の方が主流です。CSSセレクタと同じ書き方で指定できて柔軟性が高く、配列に近い扱いができるためforEachでそのままループできます。

const targets = document.querySelectorAll('.change-badge');

targets.forEach((el) => {
  // 各要素に対して行いたい処理
});

画像を一括で差し替える

要素自体が<img>タグの場合、画像を差し替えたいだけならinnerHTMLでタグごと書き換える必要はなく、src属性だけを変更すれば十分です。

<img class="change-badge" src="badge-normal.png" alt="通常価格">

document.querySelectorAll('.change-badge').forEach((img) => {
  img.src = 'badge-sale.png';
  img.alt = 'セール価格';
});

クラスの付け外し・表示切り替えにも応用できる

同じ考え方は、表示・非表示の切り替えやスタイル変更にもそのまま使えます。

// 特定のクラスが付いた要素をまとめて非表示にする
document.querySelectorAll('.is-sold-out').forEach((el) => {
  el.classList.add('is-hidden');
});

まとめ

• 同じクラスを持つ要素はquerySelectorAll()+forEachでまとめて取得・操作できる
• 画像の差し替えはinnerHTMLではなくsrc属性の変更だけで十分
• innerHTMLでの丸ごと書き換えは、属性の消失やHTML構造の破壊につながることがあるため最終手段にする
• 表示切り替えにはclassList.add()/remove()が使える