0Pricing
Frontend Academy · レッスン

querySelectorとquerySelectorAll

CSSセレクター文字列を使って単一または複数の要素を検索し、NodeListとHTMLCollectionの違いを理解します。

「querySelectorとquerySelectorAll」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

DOMとは

Document Object Model は、HTML 構造を表す JavaScript オブジェクトのツリーです。JavaScript は DOM とやり取りして要素の読み取り、変更、追加、削除を行い、Web ページを動的にします。

getElementById

古典的なセレクターです。document.getElementById('myId') は、その id を持つ要素を返します。見つからない場合は null を返します。高速ですが、ID にしか使用できません。

const header = document.getElementById('site-header');
if (header) {
  header.style.backgroundColor = 'navy';
}

querySelector — 単一要素

document.querySelector(cssSelector) は、任意の CSS セレクターに一致する最初の要素を返します。一致する要素がない場合は null を返します。getElementById よりも柔軟です。

const btn = document.querySelector('.btn-primary');
const input = document.querySelector('input[type="email"]');
const hero = document.querySelector('#hero h1');

querySelectorAll — 複数の要素

document.querySelectorAll(cssSelector) は、一致するすべての要素を含む静的な NodeListを返します。これは live array ではないため、反復処理する必要があります。配列メソッドを使用するには、Array.from() またはスプレッド構文を使用してください。

const cards = document.querySelectorAll('.card');
cards.forEach(card => card.classList.add('loaded'));

// Convert to array for array methods:
const hrefs = Array.from(document.querySelectorAll('a')).map(a => a.href);

スコープ付きクエリ

任意の要素に対して querySelector を呼び出すと、ドキュメント全体ではなく、そのサブツリー内だけを検索できます。これにより処理が効率化され、ページの別の部分にある要素を誤って選択するのを防げます。

const nav = document.querySelector('#main-nav');
const links = nav.querySelectorAll('a'); // only links inside #main-nav

NodeListとHTMLCollection

NodeList（querySelectorAll から取得）は静的で、クエリ実行時点の DOM を反映します。HTMLCollection（getElementsByClassName などから取得）はライブで、DOM の変更に応じて自動的に更新されます。どちらも配列のように扱えますが、配列ではありません。

DOMの走査

任意の要素から、element.parentElement、element.children、element.firstElementChild、element.lastElementChild、element.nextElementSibling、element.previousElementSibling を使って移動できます。

const list = document.querySelector('ul');
console.log(list.children.length);       // number of li elements
console.log(list.firstElementChild);     // first li
console.log(list.parentElement);         // ul's parent

要素の存在確認

結果を使用する前に、querySelector が null を返していないことを必ず確認してください。特に、すべてのページに存在するとは限らない要素を扱う場合に重要です。

const modal = document.querySelector('.modal');
if (modal) {
  // safe to use modal here
  modal.classList.add('open');
}

matches()とclosest()

element.matches(selector) は、要素がセレクターに一致する場合に true を返します。element.closest(selector) は DOM ツリーを上方向にたどり、セレクターに一致する最初の祖先要素を返します。一致する要素がない場合は null を返します。

const item = document.querySelector('.list-item');
console.log(item.matches('.active'));     // false

// Event delegation: find the clicked card
document.addEventListener('click', (e) => {
  const card = e.target.closest('.card');
  if (card) card.classList.toggle('selected');
});

contains()

parentElement.contains(childElement) は、子要素が親要素の内部にある場合、または子要素自体が親要素である場合に true を返します。クリックがモーダルやドロップダウンの外側で発生したかどうかを確認する場合に便利です。

document.addEventListener('click', (e) => {
  const menu = document.querySelector('.dropdown-menu');
  if (!menu.contains(e.target)) {
    menu.hidden = true; // clicked outside
  }
});

パフォーマンス: DOMクエリを最小限にする

DOM クエリは無料ではありません。querySelector を繰り返し呼び出すのではなく、結果を変数にキャッシュしてください。ループ内では、レイアウトスラッシングを避けるため、DOM の読み取りと DOM の書き込みをまとめて行います。

// Bad — queries DOM in every iteration:
for (let i = 0; i < 100; i++) {
  document.querySelector('#counter').textContent = i;
}

// Good — cache the element:
const counter = document.querySelector('#counter');
for (let i = 0; i < 100; i++) counter.textContent = i;

確認問題

一致するすべての要素を静的な NodeListとして返すメソッドはどれですか？

まとめ: DOM要素の選択

querySelector は最初に一致した要素を返します。querySelectorAll は一致するすべての要素を静的な NodeList として返します。効率化のため、クエリの対象をサブツリーに限定してください。クエリ結果をキャッシュしてください。イベントデリゲーションには closest() を使用します。クエリで取得した要素を使用する前には、必ず null を確認してください。

よくある質問

「querySelectorとquerySelectorAll」レッスンは無料ですか？

はい。「querySelectorとquerySelectorAll」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「querySelectorとquerySelectorAll」で何を学びますか？

CSSセレクター文字列を使って単一または複数の要素を検索し、NodeListとHTMLCollectionの違いを理解します。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「querySelectorとquerySelectorAll」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. querySelectorとquerySelectorAll
  2. addEventListenerとEventオブジェクト
  3. コンテンツの変更: textContent、innerHTML、classList
  4. 要素の作成と追加
← Frontend Academyに戻る