導入：なぜquerySelectorAllが必要なのか
Webページ上で特定の要素を動かしたいとき、JavaScriptで「どの要素を操作するか」を指定する必要があります。例えば、ページ内のすべてのボタンにクリックイベントを追加したい場合、一つずつ要素を探していては大変ですよね。そこで役立つのがDocument.querySelectorAllです。これを使うと、条件に一致するすべての要素を一度に取得し、まとめて操作できるため、コードが非常にシンプルで効率的になります。
基礎知識：querySelectorAllとは？
Document.querySelectorAllは、CSSセレクタ（.class名や#ID名など）を使って、条件に一致するHTML要素をすべて取得するメソッドです。
取得した結果は「NodeList（ノードリスト）」という形式で返されます。これは配列に似たリストで、JavaScriptのループ処理（forEachなど）を使って、順番に中身を取り出すことができます。
実装：基本的な使い方の手順
1. 取得したい要素をCSSセレクタで指定します。
2. querySelectorAllを使って要素を取得し、変数に代入します。
3. 取得したリストをループ処理（forEach）で回し、個々の要素に対して処理を行います。
サンプルプログラム
以下のコードは、ページ内にあるすべての「強調ボタン」の背景色を一括で変更する例です。
応用・注意点：現場で役立つポイント
1. NodeListは配列ではない
NodeListは配列と似ていますが、mapやfilterといった一部の配列専用メソッドが使えない場合があります。もし配列として扱いたい場合は、Array.from()を使って変換するか、スプレッド構文 `[…buttons]` を利用しましょう。
2. セレクタの指定ミスに注意
querySelectorAllは、CSSと同じ記法を使います。IDを指定する場合は `#`、クラスを指定する場合は `.` を忘れないようにしましょう。
3. 要素が存在しない場合
指定した条件に一致する要素が一つもなかった場合、エラーにはならず「空のNodeList」が返されます。そのため、要素がない状態でループを回しても何も起きず、プログラムが停止することはないので安心してください。
まずは、自分のサイトで特定のクラスを持つ要素をすべて取得し、console.logで表示させるところから試してみてください！