JavaScriptでは、複数のDOM要素を取得する際に`querySelectorAll()`メソッドを使用します。このメソッドは指定したセレクタに一致するすべての要素を取得できる便利な機能です。

querySelectorAll()の基本的な使い方

const elements = document.querySelectorAll('セレクタ');

セレクタには、CSSセレクタと同じ記法が使用できます。以下に具体例を示します：

// クラスで要素を取得
const buttons = document.querySelectorAll('.button');

// IDで要素を取得
const items = document.querySelectorAll('#item');

// タグ名で要素を取得
const paragraphs = document.querySelectorAll('p');

取得した要素の操作方法

`querySelectorAll()`で取得した要素は、NodeListとして返されます。これを操作するには以下の方法があります：

forEach()を使用する方法

const elements = document.querySelectorAll('.item');
elements.forEach(element => {
    element.style.color = 'red';
});

配列に変換して操作する方法

const elements = document.querySelectorAll('.item');
const elementsArray = Array.from(elements);

elementsArray.map(element => {
    element.classList.add('active');
});

実践的な使用例

複数のボタンにイベントリスナーを追加

const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
    button.addEventListener('click', () => {
        console.log('ボタンがクリックされました');
    });
});

特定の条件に一致する要素を取得

// data属性を持つ要素を取得
const elements = document.querySelectorAll('[data-type="product"]');

// 複数のクラスを持つ要素を取得
const items = document.querySelectorAll('.item.active');

よくある注意点

1. インデックスでのアクセス

NodeListは配列のようにインデックスでアクセスできますが、一部の配列メソッドは使用できません。

const elements = document.querySelectorAll('.item');
const firstElement = elements[0]; // 最初の要素にアクセス

2. 要素が見つからない場合

一致する要素が見つからない場合、空のNodeListが返されます（nullではありません）。

const elements = document.querySelectorAll('.non-existent');
console.log(elements.length); // 0

3. 動的な要素への対応

`querySelectorAll()`は静的なNodeListを返すため、DOM要素が追加されても自動的には更新されません。

まとめ

`querySelectorAll()`は、複数のDOM要素を簡単に取得できる強力なメソッドです。CSSセレクタの知識があれば直感的に使用でき、様々なケースで活用できます。要素の操作には主に`forEach()`を使用するか、配列に変換して操作することをお勧めします。