導入
Web開発において、特定のHTML要素を操作することは避けて通れない作業です。しかし、id属性だけで要素を取得しようとすると、複雑な構造のページでは限界があります。そこで役立つのが「Element.querySelectorAll」です。このメソッドを使えば、CSSセレクタをそのまま利用して、直感的かつ柔軟にDOM要素を検索・操作できます。コードの記述量を減らし、保守性を高めるために必須のテクニックです。
基礎知識
Element.querySelectorAllとは、指定した要素の中で、引数に渡したCSSセレクタ（.class名やdiv > pなど）に一致するすべての要素を「NodeList」として取得するメソッドです。
従来の「getElementById」は単一の要素しか取得できませんが、querySelectorAllは複数の要素をまとめて取得できる点が最大の特徴です。取得したNodeListは配列のような構造をしているため、ループ処理を使って一括でスタイルを変更したり、イベントリスナーを登録したりすることが非常に簡単になります。
実装/解決策
使い方は非常にシンプルです。検索したい親要素（あるいはdocument）に対して、セレクタを文字列で渡すだけです。
1. 取得したい範囲の親要素を特定する。
2. querySelectorAll(‘CSSセレクタ’)を呼び出す。
3. 返されたNodeListに対して、forEachメソッドなどで各要素にアクセスする。
この手順を踏むことで、特定のエリア内にあるボタンやリストアイテムを一括で制御することが可能になります。
サンプルプログラム
以下のコードは、特定のリスト（ul）の中にあるすべてのアイテム（li）を一括で操作する例です。
- りんご
- バナナ
- ぶどう
応用・注意点
現場で活用する上で、以下の2点に注意してください。
1. NodeListの特性: querySelectorAllで取得したNodeListは、Array.prototype.mapなどの配列専用メソッドが直接使えない場合があります（最近のブラウザでは改善されていますが、環境によってはArray.from()で配列に変換すると安全です）。
2. 動的なDOMの変化: 取得した後にHTML構造が動的に書き換わった場合、NodeListは最新の状態を自動で反映しない（静的である）という特性があります。DOMの追加・削除が頻繁に行われる場合は、改めてquerySelectorAllを実行するように設計しましょう。
これらのポイントを押さえることで、より堅牢で効率的なフロントエンド実装が可能になります。ぜひ日々の開発で活用してください。