JavaScriptのquerySelector()関数とquerySelectorAll()関数の違い

主な違いを比較する

querySelector()とquerySelectorAll()関数は、どちらもHTMLドキュメント内の要素を選択するという共通点がありますが、この2つの関数にはいくつかの重要な違いがあります。

querySelector()とquerySelectorAll()関数は、名前がよく似ているため、多くの人が混同しやすい関数です。
特に、jQueryを使ってDOMを操作した経験のある開発者は、このような混乱をより起こしやすい傾向があります。

querySelector()関数は、HTMLドキュメントまたは特定の要素内で指定したCSSセレクターに一致する最初の要素のみを返しますが、 querySelectorAll()関数は、一致するすべての要素を返すという大きな違いがあります。

このほかにも、2つの関数が返すオブジェクトの形や取り扱い方にもそれぞれ異なる違いがあります。

2つの関数の比較

これら2つの関数は、HTMLドキュメント内でCSSセレクター（Selectors）を使って要素を選択するために使用されます。以下は2つの関数を比較した内容です。

querySelector()とquerySelectorAll()関数の比較
比較項目	`querySelector()`	`querySelectorAll()`
使用用途	HTMLドキュメントまたは特定の要素内で、引数として指定したCSSセレクターに一致する最初に出現する要素を選択	HTMLドキュメントまたは特定の要素内で、引数として指定したCSSセレクターに一致するすべての要素を選択
パラメータ	文字列形式の有効なCSSセレクター	文字列形式の有効なCSSセレクター
CSSセレクターに一致する要素が存在する場合	最初の要素のみを返す	すべての要素を返す
返り値の形式	要素ノード	類似配列である`NodeList`オブジェクトのリスト
CSSセレクターに一致する要素が存在しない場合	nullを返す	空の`NodeList`オブジェクトを返す
選択した要素の操作	要素ノードに対して使用できるプロパティやメソッドを直接適用	`NodeList`オブジェクトを`forEach()`関数、`for`文、`for...of`文などで順に処理し、各項目の要素ノードにアクセスして、要素ノードに対して使用できるプロパティやメソッドを適用

2つの関数による選択した要素の操作の比較

querySelector()とquerySelectorAll()の最も重要な違いは、選択した要素の操作方法にあります。

querySelector()は、一致する要素が存在する場合、要素ノードに対して使用できるプロパティやメソッドを直接適用できますが、
querySelectorAll()は、返されるNodeListオブジェクトをforEach()関数、for文、for...of文などで順に処理し、各項目の要素ノードにアクセスして、要素ノードに対して使用できるプロパティやメソッドを適用できます。

次の例を通して確認してみましょう。

JavaScript

// querySelector() 使用例
const element = document.querySelector(".my-class"); // 最初の要素のみ返す
element.textContent = "querySelector()で選択した要素";

// querySelectorAll() 使用例
const elements = document.querySelectorAll(".my-class"); // すべての要素を返す
elements.forEach((element, index) => { // ループ処理が必要
    element.textContent = `querySelectorAll()で選択した要素 ${index}`;
});

次の2つのトピックを参考にしてください。

まとめと推奨事項

querySelector()とquerySelectorAll()関数を比較し、その違いを確認しました。
これら2つの関数を選択する際の主な考慮事項は次のとおりです。

単一の要素を選択する場合はquerySelector()を使用し、複数の要素を選択する場合はquerySelectorAll()を使用してください。
大規模なDOMで作業する場合、querySelectorAll()の方が効率的な場合があります。ただし、パフォーマンスの差はわずかであることも多いため、実際の使用ケースに応じて判断してください。

最後に、コードを作成する際は、選択した関数の特性や注意点を考慮して作業してください。必要に応じてブラウザのコンソールを活用して結果を確認し、デバッグを行いましょう。

ブラウザ互換性

querySelector()関数とquerySelectorAll()関数のブラウザ互換性
関数	デスクトップ Chrome	デスクトップデスクトップ Edge	デスクトップ Firefox	Safari
`querySelector()`	1	12	3.5	3.1
`querySelectorAll()`	1	12	3.5	3.1

仕様書

querySelector()関数とquerySelectorAll()関数の仕様書
仕様書
`querySelector()`	DOM Standard #ref-for-dom-parentnode-queryselector①
`querySelectorAll()`	DOM Standard #ref-for-dom-parentnode-queryselectorall①

参考資料

codingCourses：JavaScript querySelector() vs. querySelectorAll()