要素を取得する — querySelector の使い方

JavaScriptの処理は、たいてい「探す → 変える」の2段構えです。この記事は前半の「探す」だけを扱います。ここさえ押さえれば、後半はやりたいことに応じて調べれば書けるようになります。

CSSのセレクタがそのまま使える

// class で探す（CSSと同じくドットを付ける）
const card = document.querySelector(".card");

// id で探す（シャープを付ける）
const title = document.querySelector("#title");

// タグ名で探す
const firstP = document.querySelector("p");

CSSで .card と書いていたものを、そのまま文字列として渡すだけです。新しい書き方を覚え直す必要はありません。

1つだけか、全部か

• querySelector … 条件に合う最初の1つだけを返す
• querySelectorAll … 条件に合う全部を返す。まとめて処理したいときに使う

querySelectorAll で受け取ったものは、forEach を使って1つずつ処理します。「全部の項目に同じ処理をする」場面で必ず出てくる形です。

見つけた要素を変える

よく使うのは次の3つです。これだけでかなりのことができます。

• textContent … 中の文字を読む・書き換える
• classList.add / remove / toggle … class を付けたり外したりする
• style.〜 … 見た目を直接変える（多用せず、classの付け外しで済ませるのが定石）

null が返ってきたときは

指定した条件に合う要素が無いと、querySelector は null（何も無い）を返します。この状態で処理を続けると「Cannot read properties of null」というエラーになります。JavaScriptで最も多いエラーのひとつです。

• 綴りの間違い（#titel など）
• ドットやシャープの付け忘れ（".card" のつもりで "card" と書いている）
• 要素より先にJavaScriptが実行されている（script タグに defer が無い）

3つ目は前の記事で扱った読み込みの問題です。エラーの文面に null が出てきたら、まず「探しているものが本当にあるか」を疑ってください。