JavaScriptで複数の要素を一括操作するテクニックを完全解説！querySelectorAll入門

1. 複数の要素を操作するとは

1. 複数の要素を操作するとは

Webページには、同じ見た目や役割を持つ要素がたくさん並ぶことがあります。例えば、メニューの項目や一覧のボタンなどです。

これらを一つずつ指定して操作するのは大変ですが、JavaScriptではまとめて扱う方法が用意されています。これが「複数要素の一括操作」です。

2. querySelectorAllとは何か

2. querySelectorAllとは何か

querySelectorAllは、条件に合うHTML要素をすべて集めてくれる命令です。条件とは、クラス名やタグ名などのことです。

集められた要素は、箱に並んで入っているような状態になります。この箱を使って、同じ処理を順番に行います。

3. HTMLの例を見てみよう

3. HTMLの例を見てみよう

まずは、同じクラスを持つボタンが複数あるHTMLを想像してください。

<button class="btn-item">ボタン1</button>
<button class="btn-item">ボタン2</button>
<button class="btn-item">ボタン3</button>

4. querySelectorAllでまとめて取得する

4. querySelectorAllでまとめて取得する

次に、JavaScriptでこれらのボタンをまとめて取得します。クラス名を指定すると、同じクラスを持つ要素がすべて集まります。

const buttons = document.querySelectorAll(".btn-item");

これで、三つのボタンが一つのまとまりとして取得されました。リストのようなイメージを持つと理解しやすいです。

5. forEachで一つずつ処理する

5. forEachで一つずつ処理する

まとめて取得した要素は、そのままでは一気に操作できません。順番に一つずつ取り出して処理します。

forEachは、箱の中身を先頭から順に取り出す命令です。

buttons.forEach(function(button) {
  button.style.backgroundColor = "yellow";
});

これで、すべてのボタンの背景色が同じ色に変わります。一括で操作しているように見えますが、中では順番に処理されています。

6. よく使われる一括操作の例

6. よく使われる一括操作の例

複数要素の一括操作は、文字の変更、表示非表示の切り替え、色の変更などでよく使われます。

例えば、すべての説明文を非表示にする、といった処理も同じ考え方で行えます。

7. 初心者がつまずきやすいポイント

7. 初心者がつまずきやすいポイント

querySelectorAllで取得した結果は、一つの要素ではありません。そのため、直接スタイルを変更しようとすると動かないことがあります。

必ず一つずつ取り出して操作する、という流れを意識すると失敗しにくくなります。