querySelectorAll とは何か
querySelectorAll は、CSS セレクタを使って「一致するすべての要素」を取得するメソッドです。返り値は NodeList（静的コレクション） で、取得時点のスナップショットが返されます。ここが重要です：後から DOM が変わっても NodeList の内容は自動更新されません。つまり「取得した瞬間の状態を固定して扱える」ため、処理の安定性が高いのが特徴です。
基本の使い方（複数要素を一括取得）
クラスでまとめて取得
<ul>
<li class="item">A</li>
<li class="item">B</li>
<li class="item">C</li>
</ul>
<script>
const items = document.querySelectorAll(".item"); // NodeList（静的）
console.log(items.length); // 3
items.forEach(el => console.log(el.textContent));
</script>
階層や属性で柔軟に絞る
<div class="card"><button data-role="buy">購入</button></div>
<div class="card"><button data-role="info">詳細</button></div>
<script>
const buyButtons = document.querySelectorAll(".card button[data-role='buy']");
buyButtons.forEach(btn => btn.textContent = "購入する");
</script>
ここが重要です：CSS セレクタの柔軟さをそのまま使えるため、複雑な条件でも一発で狙えます。
NodeList の性質（静的で安定）
DOM を変えても反映されない
const items = document.querySelectorAll(".item"); // 3件
const ul = document.querySelector("ul");
const li = document.createElement("li");
li.className = "item";
ul.append(li);
console.log(items.length); // 3（静的なので変わらない）
ここが重要です：querySelectorAll は「取得時点の状態を固定」するため、処理中に DOM が変わっても結果がブレません。ライブ更新が必要なら getElementsByClassName を使いますが、安定性重視なら querySelectorAll が適しています。
反復処理のしやすさ（配列メソッドが使える）
NodeList は多くの環境で forEach が使えます。配列に変換すれば map や filter なども利用可能です。
const nodes = document.querySelectorAll(".item");
// forEach は直接使える
nodes.forEach(el => el.classList.add("bound"));
// 配列に変換して map/filter を使う
const arr = Array.from(nodes);
const texts = arr.map(el => el.textContent);
console.log(texts); // ["A", "B", "C"]
ここが重要です：複雑な処理をしたいなら配列化してから扱う。シンプルな一括処理なら NodeList のまま forEach で十分です。
スコープの絞り込み（親要素から検索）
document 全体から検索するだけでなく、親要素から呼び出すと「その要素配下だけ」を対象にできます。
const panel = document.getElementById("panel");
const buttons = panel.querySelectorAll(".btn"); // panel 内の .btn だけ
ここが重要です：大規模ページではスコープを限定することで、意図しない要素混入を防ぎ、処理対象を明確にできます。
querySelector との違い（1件 vs 複数件）
- querySelector は「最初の1件」だけ。
- querySelectorAll は「一致するすべての要素」を静的 NodeList として返す。
const first = document.querySelector(".item"); // 最初の1件
const all = document.querySelectorAll(".item"); // 全件
ここが重要です：複数要素をまとめて処理したいなら querySelectorAll、一意の要素を狙うなら querySelector。役割を明確に分けるとコードが読みやすくなります。
実践例：チェックボックスの一括制御
<form id="prefs">
<label><input type="checkbox" class="opt"> A</label>
<label><input type="checkbox" class="opt"> B</label>
<label><input type="checkbox" class="opt"> C</label>
<button id="select-all">全選択</button>
</form>
<script defer>
const form = document.getElementById("prefs");
const checkboxes = form.querySelectorAll(".opt");
const btn = document.getElementById("select-all");
btn.addEventListener("click", e => {
e.preventDefault();
checkboxes.forEach(cb => cb.checked = true);
});
</script>
ここが重要です：querySelectorAll でまとめて取得し、forEach で一括処理。静的 NodeListなので、処理中に件数が変わらず安定して動作します。
まとめ
querySelectorAll は「CSS セレクタで一致するすべての要素」を静的 NodeList として返すメソッドです。DOM 変更に追随しないため処理が安定し、forEach や配列化で柔軟に操作できます。document だけでなく親要素からも検索でき、querySelector と使い分けることで「1件だけ」「複数件まとめて」を明確に区別できます。セレクタの柔軟さと静的な性質を理解すれば、初心者でも複雑な DOM 操作を安全に書けるようになります。