querySelector で要素を選択する
CSS セレクターを使って要素を検索します。
「querySelector で要素を選択する」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
querySelector を使ってみる
querySelector は CSS セレクターに一致する最初の要素を返します。一致するものがなければ null を返します。これは document とすべての要素で利用できます。
const title = document.querySelector("h1");
console.log(title.textContent);どの CSS セレクターでも使用可能
querySelector の強みは、CSS で使うものと同じセレクターを受け取れることです。タグ、クラス、id、属性、そしてそれらの組み合わせを指定できます。
document.querySelector("#main"); // by id
document.querySelector(".card"); // by class
document.querySelector("input[type=email]"); // by attributequerySelectorAll
querySelectorAll は、一致するすべての要素を静的な NodeList として返します。一致するものが 0 件でも空のリストを返し、null になることはありません。
const cards = document.querySelectorAll(".card");
console.log(cards.length);結果をループ処理する
querySelectorAll が返す NodeList は forEach を直接サポートしているため、簡潔に反復処理できます。
const items = document.querySelectorAll("li");
items.forEach((li) => {
console.log(li.textContent);
});子孫セレクター
CSS と同じように、空白（子孫）を使って入れ子になった要素を対象にできます。これにより、.product の内側にあるすべての .price を検索できます。
const prices = document.querySelectorAll(".product .price");クラスの組み合わせ
空白を入れずにクラスを連結すると、要素がそのすべてを持っている必要があります。ここでは、primary かつ large であるボタンに一致させています。
const btn = document.querySelector("button.primary.large");スコープ付きクエリ
要素（document ではありません）で querySelector を呼び出すと、その要素の内側だけを検索します。これにより、検索範囲を限定して高速に処理できます。
const form = document.querySelector("#signup");
const emailField = form.querySelector("input[name=email]");疑似クラス
:first-child や :nth-of-type などの構造的な疑似クラスも使用できます。
document.querySelector("li:first-child");
document.querySelectorAll("tr:nth-of-type(even)");一致しない場合の処理
querySelector は null を返すことがあるため、結果を使う前に確認して TypeError を防ぎます。
const banner = document.querySelector(".banner");
if (banner) {
banner.classList.add("hidden");
}属性セレクター
属性セレクターを使うと、data 属性を基準に一致させられます。クラスに依存せず要素を取得したい場合に便利です。
const widget = document.querySelector("[data-role=widget]");
const openTabs = document.querySelectorAll("[aria-expanded=true]");querySelector と従来の API の比較
querySelector は任意のセレクターを受け取れるため、getElementById より柔軟です。ただし、id による検索のほうが依然としてわずかに高速です。目的に合ったツールを使い分けてください。
document.querySelector("#nav"); // flexible
document.getElementById("nav"); // fastest for ids簡単な確認
セレクターについての理解度を確認しましょう。
まとめ
querySelector は最初に一致した要素（または null）を返し、querySelectorAll は一致したすべての要素を静的な NodeList として返すことを学びました。どちらも完全な CSS セレクターを受け取ることができ、親要素の内側に検索範囲を限定できます。querySelector を使うときは、必ず null を確認してください。
よくある質問
「querySelector で要素を選択する」レッスンは無料ですか？
はい。「querySelector で要素を選択する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「querySelector で要素を選択する」で何を学びますか？
CSS セレクターを使って要素を検索します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「querySelector で要素を選択する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- querySelector で要素を選択する
- getElementById と getElementsByClassName
- 親・子・兄弟要素をたどる
- NodeList と HTMLCollection