問題一覧に戻る
中級dom
問題102: querySelector

querySelectorメソッドによるCSSセレクタを使った要素取得を学びましょう。document.querySelectorはCSSセレクタを使用して柔軟に要素を検索でき、クラス名（.で開始）、ID（#で開始）、タグ名、属性、擬似クラスなど、あらゆるCSSセレクタが使用可能です。複数の要素がマッチしても最初の一つだけを返します。getElementByIdよりも柔軟で、複雑な選択が可能なため、現代的なJavaScriptでは非常によく使われます。

// Mock DOM
const mockElements = [
  { className: "button", textContent: "クリック" },
  { className: "button primary", textContent: "送信" },
  { id: "title", tagName: "h1", textContent: "タイトル" }
];

const querySelector = (selector) => {
  if (selector === ".button") return mockElements[0];
  if (selector === ".primary") return mockElements[1];
  if (selector === "#title") return mockElements[2];
  return null;
};

const button = (".button");
console.log(`ボタン: ${button.textContent}`);

const primary = (".primary");
console.log(`プライマリ: ${primary.textContent}`);

const title = ("#title");
console.log(`H1: ${title.textContent}`);