querySelectorとquerySelectorAllの使い分けについて
JavaScript で DOM 要素を取得する際によく使われるのが querySelector と querySelectorAll です。
どちらも CSS セレクタを使って要素を探しますが、取得できる数や返り値が異なります。
querySelectorとは
querySelector は、条件に一致する要素のうち 最初の1つだけ を取得します。
ページ内に該当する要素が複数あっても、最初に見つかったものだけが対象となります。
もし該当する要素がなければ null が返ります。
querySelectorAllとは
querySelectorAll は、条件に一致する すべての要素 を取得します。
結果は NodeList という配列のような形式で返されます。
該当する要素がなければ、空の NodeList が返ります。
取得した要素を順番に処理したい場合は、forEach などを使って繰り返します。
違いと使い分け
1つだけ取得すればよい場合は querySelector、
複数の要素をまとめて取得したい場合は querySelectorAll を使います。
例として、特定のボタン1つを操作したい場合は querySelector、
ページ内の全てのボタンを操作したい場合は querySelectorAll を使うのが適しています。
注意点
querySelectorAll の返り値は配列ではありませんが、配列に似た NodeList です。
両方とも CSS のセレクタ記法で柔軟に要素を指定できます。
この2つの特徴を理解して使い分けることで、DOM 操作がより効率的になります。
