【JavaScript入門】要素の選択

このページで解説している内容は、以下の YouTube 動画の解説で見ることができます。

要素の選択

　DOM を操作する第一歩は「ページ上のどの要素を触るのか」を特定することです。JavaScript では CSS セレクター を用いた querySelector / querySelectorAll を中心に、ID・クラス・タグ名専用の取得メソッドが用意されています。ここでは代表的なセレクターと取得 API を整理し、動くサンプルで“ヒットした／しなかった”両ケースを確認します。

１．CSS セレクター早見表

セレクター	意味	例
`タグ名`	該当タグすべて	`p`
`#id`	`id` が一致	`#main`
`.class`	`class` が含まれる	`.btn`
`[属性名="値"]`	属性値が一致	`[type="email"]`
`セレクターセレクター`	半角スペースで区切ると、「左側の条件の要素」の中にある「右側の条件の要素」を指す。「`card h2`」なら、クラス card の中にある h2 タグの要素を指す。	`.card h2`

２．要素取得メソッド一覧

メソッド	戻り値	検索キー	備考
`querySelector(sel)`	最初の要素 / `null`	CSS セレクター	もっとも汎用
`querySelectorAll(sel)`	`NodeList`	CSS セレクター	forEach 可
`getElementById(id)`	要素 / `null`	ID	高速だが 1 つ限定
`getElementsByClassName(cls)`	`HTMLCollection`	クラス名	ライブ更新
`getElementsByTagName(tag)`	`HTMLCollection`	タグ名	ライブ更新

　NodeList と HTMLCollection はどちらも“配列風”オブジェクトで .length と添字アクセスが可能。NodeList は forEach が直接使えます。

３．サンプル ― 取得成功と失敗をコンソールで確認

ファイル名： select_element_demo.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の選択デモ</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
body{font-family:sans-serif;margin:2rem}
li{margin:.2rem 0}
</style>
</head>
<body>
<h2>☕ メニュー</h2>

<ul id="menu">
  <li class="item">カフェラテ</li>
  <li class="item">エスプレッソ</li>
  <li class="item">モカ</li>
</ul>

<script>
// ---------- querySelector ----------
const ul = document.querySelector('#menu');
console.log('querySelector("#menu") →', ul);           // 成功

const shop = document.querySelector('#shop');
console.log('querySelector("#shop") →', shop);         // null（失敗）

// ---------- querySelectorAll ----------
const items = document.querySelectorAll('.item');
console.log(`.item は ${items.length} 件`, items);

const tables = document.querySelectorAll('.table');
console.log(`.table は ${tables.length} 件`, tables);

// ---------- 旧来 API 例 ----------
const byTag  = document.getElementsByTagName('li');
console.log(`getElementsByTagName("li") → ${byTag.length} 件`);

const byCls  = document.getElementsByClassName('item');
console.log(`getElementsByClassName("item") → ${byCls.length} 件`);
</script>
</body>
</html>

ブラウザの出力

デバックコンソールの出力イメージ

querySelector("#menu") → <ul id="menu">…</ul>
querySelector("#shop") → null
.item は 3 件 NodeList(3) [li, li, li]
.table は 0 件 NodeList(0) []
getElementsByTagName("li") → 3 件
getElementsByClassName("item") → 3 件

プログラム解説

querySelector は最初の 1 件のみ取得、見つからなければ null。
querySelectorAll は一致要素を 静的 NodeList として返す。forEach で回せる。
getElementsBy* 系は ライブコレクション。DOM が変わると内容も即更新される。

まとめ

DOM 操作は「要素を選ぶ」→「プロパティ変更／イベント登録」という 2 段階。
現代の標準は CSS セレクター + querySelector/All。旧 API はライブ更新が必要な特殊ケースでのみ利用すると良い。
取得結果が null や長さ 0 のコレクションになることを想定し、存在チェックを忘れないようにしよう。