querySelectorとquerySelectorAllの違いは？どう使い分ける？初心者向けに解説

JavaScriptでHTML要素を操作するとき、
ほぼ必ず登場するのが querySelector と querySelectorAll です。

名前がよく似ているため、
「どっちを使えばいいの？」「何が違うの？」と混乱しやすいポイントでもあります。

この記事ではそれぞれの役割と違いを整理し、
実際の使い分けがイメージできるよう分かりやすく解説します。

querySelectorとquerySelectorAllはどの場面で使う？
1. querySelectorとは？
2. querySelectorAllとは？
querySelectorとquerySelectorAllの違い
まとめ

querySelectorとquerySelectorAllはどの場面で使う？

まずは、それぞれが どんな目的で使われるのか を押さえましょう。

querySelectorとは？

querySelector は、条件に一致する最初の要素を1つだけ取得 したいときに使います。

const title = document.querySelector('.title');

指定したセレクタに一致する 最初の1要素のみ取得
取得できるのは 単一の要素
ボタンや見出しなど、1つだけ操作したい場合に便利

querySelectorAllとは？

querySelectorAll は、条件に一致するすべての要素をまとめて取得 したいときに使います。

const items = document.querySelectorAll('.item');

一致する 複数の要素をまとめて取得
返り値は NodeList
一覧要素や複数ボタンを操作したい場合に便利

querySelectorとquerySelectorAllの違い

ここでは、初心者が特につまずきやすい違いを整理します。

取得できる要素数の違い

最も大きな違いは、取得できる要素の数 です。

querySelector
→ 最初の1つだけ取得
querySelectorAll
→ 条件に一致するすべてを取得

// HTMLに .item が3つあった場合
document.querySelector('.item');     // 最初の1つだけ
document.querySelectorAll('.item');  // 3つすべて

返り値の型の違い

返ってくる値の種類も異なります。

querySelector
→ Element
querySelectorAll
→ NodeList

const single = document.querySelector('.item');
const multiple = document.querySelectorAll('.item');

console.log(single);   // 要素そのもの
console.log(multiple); // NodeList(複数)

NodeList は配列のように見えますが、完全な配列ではない 点に注意が必要です。

forEachが使えるかどうか

querySelectorAll で取得した NodeList には forEach が使えます。

const items = document.querySelectorAll('.item');

items.forEach(item => {
  item.classList.add('active');
});

一方、querySelector は単一要素なので forEach は使えません。

まとめ

querySelector と querySelectorAll は、どちらも非常によく使う重要なメソッドです。
違いを一言でまとめると、「1つか、複数か」 という点に尽きます。

最初は混乱しがちですが、
「この要素は1つだけ？それとも複数ある？」
と考えるクセをつけることで、自然に使い分けられるようになります。

DOM操作の基礎として必須の知識なので、実際のコードで試しながら身につけていきましょう。

NAMEKO.ONLINE では、Web開発初学者向けのコンテンツを発信しております！
ぜひ、多くの方にシェアいただけますと嬉しいです！