querySelector の基本 — document.querySelector('.cls')
querySelector は「CSSセレクタで、最初に一致した1つの要素」を取得するメソッドです。見つからなければ null を返します。クラス（.name）、ID（#id）、タグ（div）、入れ子（header h1）、属性セレクタ（[data-x]）など、CSSと同じ記法で柔軟に指定できます。
基本の使い方
<div id="app">
<h1 class="title">Hello</h1>
<p class="msg">Hi</p>
</div>
<script>
const byClass = document.querySelector(".title"); // クラス
const byId = document.querySelector("#app"); // ID
const byTag = document.querySelector("p"); // タグ（最初の1件）
console.log(byClass.textContent); // "Hello"
console.log(byId.id); // "app"
console.log(byTag.className); // "msg"
</script>
- 特徴: CSSセレクタで指定し、最初の一致のみ取得。なければ
null。
セレクタのよくある書き方
document.querySelector("header h1"); // 入れ子（header内のh1）
document.querySelector(".card .title"); // 子孫の組み合わせ
document.querySelector("ul > li.item"); // 直接の子（>）
document.querySelector("[data-id='42']"); // 属性一致
document.querySelector("button.primary:hover"); // 疑似（注意: 実際の状態に依存）
- ポイント: jQuery風の感覚でCSSの書き方そのままで指定できるのが強みです。
例題：ボタンでパネルを開閉
<button class="toggle">Open</button>
<div class="panel hidden">Content</div>
<style>
.hidden { display: none; }
</style>
<script>
const btn = document.querySelector(".toggle");
const panel = document.querySelector(".panel");
btn.addEventListener("click", () => {
panel.classList.toggle("hidden");
});
</script>
- 狙い: セレクタで単一要素を取り、イベント→クラス切り替えの基本パターン。
例題：フォームのバリデーションとメッセージ表示
<form id="login">
<input name="email" type="email" placeholder="Email">
<p class="error"></p>
<button type="submit">Sign in</button>
</form>
<script>
const form = document.querySelector("#login");
const error = document.querySelector("#login .error");
form.addEventListener("submit", (e) => {
e.preventDefault();
const email = document.querySelector("#login [name='email']").value.trim();
if (!email.includes("@")) {
error.textContent = "メール形式が不正です";
return;
}
error.textContent = "";
// 送信処理へ...
});
</script>
- 狙い: 入れ子セレクタでフォーム内要素を絞り、単一取得で扱いやすくする。
実務でのコツ
- 明確な範囲指定:
document.querySelectorだけでなく、親要素からの相対検索も使うと安全。
const card = document.querySelector(".card");
const titleInCard = card.querySelector(".title"); // カード内に限定
- 存在チェック:
const el = document.querySelector(".x"); if (!el) return;の癖をつける。見つからないとnullで落ちます。 - 単一 vs 複数: 複数欲しいなら
querySelectorAll（静的NodeList）を使う。querySelectorは常に1件だけ。 - 読みやすいセレクタ: 長くなりすぎるセレクタは、親を変数に取って段階的に取得するとミスが減る。
よくあるハマりと対策
- 間違ったセレクタ記法: クラスは「.」、IDは「#」。タグはそのまま。属性は
[name="x"]。CSSと同じだと覚える。 - 複数一致する前提で使う: 最初の1件しか返らない。全件処理は
querySelectorAll＋forEachにする。 - スコープが広すぎる:
document全体で探すと意図しない別の要素に当たる。親要素からquerySelectorすると安全。
練習問題（手を動かす）
<div class="card">
<h2 class="title">Item A</h2>
<button class="like">Like</button>
</div>
<div class="card">
<h2 class="title">Item B</h2>
<button class="like">Like</button>
</div>
<script>
// 1) 最初の .card のタイトルを書き換える
const firstTitle = document.querySelector(".card .title");
if (firstTitle) firstTitle.textContent = "Item A (edited)";
// 2) 最初の .like ボタンだけにイベントを付ける
const firstLike = document.querySelector(".like");
if (firstLike) {
firstLike.addEventListener("click", () => console.log("Liked first card"));
}
// 3) 2つ目のカードに限定して要素取得（親からの相対）
const secondCard = document.querySelectorAll(".card")[1];
if (secondCard) {
const likeInSecond = secondCard.querySelector(".like");
likeInSecond.addEventListener("click", () => console.log("Liked second card"));
}
</script>
直感的な指針
- まずは「CSSセレクタで最初の1件」を取る、と覚える。見つからないと
null。複数ならquerySelectorAll。親からの相対検索で範囲を絞ると安全で読みやすい。