【ぼくのJavaScript備忘録】querySelector の使い方徹底解説

1. querySelector とは？

querySelector は、JavaScript の DOM 要素を取得 するためのメソッドです。
CSS セレクターを使って、ページ内の 最初に一致する要素を取得 できます。

documentとは？
document は、ブラウザが読み込んだ HTMLドキュメント全体 を指すオブジェクトです。
ただし、document に直接イベントを設定するのではなく、特定の要素を変数に格納して扱うことも可能 です。

ポイント：getElementById などと異なり、querySelector は CSS セレクター を使用できるため、クラスや属性を柔軟に指定可能。

---

2. querySelector の基本的な使い方

const element = document.querySelector(セレクター);

• セレクター：取得したい要素を指定する CSS セレクター
• element：取得した要素（該当するものがない場合は null）

☑️ 例1：クラス名を指定して取得

const box = document.querySelector(".box");
console.log(box);

クラス .box を持つ最初の要素を取得

☑️ 例2：ID を指定して取得

const header = document.querySelector("#header");
console.log(header);

ID header の要素を取得（getElementById とほぼ同じ）

☑️ 例3：特定の子要素を取得

const firstItem = document.querySelector("ul li");
console.log(firstItem);

ul 内の最初の li 要素を取得

---

3. querySelectorAll との違い

querySelector は 最初に一致した要素のみ取得 するのに対し、
querySelectorAll は すべての一致する要素を取得し、NodeList（配列のようなもの）として返す ことができます。

☑️ 例4：querySelectorAll で複数の要素を取得

const items = document.querySelectorAll(".item");
console.log(items);

クラス .item を持つすべての要素を取得

🔍 querySelector vs querySelectorAll

メソッド	概要
querySelector(".class")	最初の 1 つだけ 取得
querySelectorAll(".class")	すべての要素 を取得（NodeList）

☑️ 例5：querySelectorAll でループ処理（forEach を使用）

const items = document.querySelectorAll(".item");
items.forEach(item => {
    console.log(item.textContent);
});

すべての .item 要素のテキストを出力

querySelectorAll で取得した NodeList は forEach を使ってループ処理が可能です。
これを活用すると、複数の要素に対して一括で処理を適用することができます。

---

4. querySelector と getElementById の違い

getElementById は ID を直接検索 するため、高速でシンプルですが、
querySelector("#id") なら CSS セレクターを統一的に利用 できます。

🔍 getElementById vs querySelector

メソッド	概要
document.getElementById("id")	ID で要素を検索（高速）
document.querySelector("#id")	CSS セレクターで統一的に検索

パフォーマンス重視なら getElementById、柔軟性が欲しいなら querySelector

---

5. querySelector を特定の要素から実行

querySelector は document だけでなく、特定の要素を起点に検索 することも可能です。

☑️ 例6：特定の親要素内を検索

const parent = document.getElementById("parent");
const child = parent.querySelector(".child");
console.log(child);

#parent の中の .child 要素を取得

---

6. まとめ

☑️ querySelector("セレクター") で 最初に一致する要素を取得
☑️ querySelectorAll("セレクター") で すべての一致する要素を取得（NodeList）
☑️ getElementById よりも 柔軟な検索が可能（ただしパフォーマンスは若干低下）
☑️ 特定の要素を起点に querySelector を実行できる
☑️ querySelectorAll で取得した要素は forEach を使ってループ処理が可能

querySelector を活用して、柔軟な DOM 操作を実現しよう！