DOM内の要素のクエリと選択

DOMのクエリの概要

DOMのクエリは、ドキュメント内の特定の要素を選択し、アクセスするための操作。これにより、要素の操作や対話が可能となる。JavaScriptは、用途や挙動に応じた複数のクエリメソッドを提供。

GetElementById

getElementByIdは、ユニークなIDを持つ単一の要素を選択するためのメソッド。IDはドキュメント内で一意であることが前提のため、最も一般的に使用される方法の一つ。
用途: 要素のIDが分かっている場合に特定の要素を選択するのに最適。
戻り値: 該当する要素があればその要素、なければnull。

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassNameは、クラス名で要素を選択し、該当する要素のライブなHTMLCollectionを返すメソッド。
用途: 同じクラス名を持つ複数の要素を選択したい場合に便利。
戻り値: 条件に一致する要素のライブHTMLCollection。DOMが変更されると自動的に更新される。
制限事項: 配列メソッドを直接使用できないため、必要に応じて配列に変換する必要がある。

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName は、タグ名（例：div、p）で要素を選択し、ライブな HTMLCollection を返します。
用途: 特定の種類のすべての要素を選択するのに最適。
戻り値: 要素のライブ HTMLCollection。
制限事項: 文脈内の指定されたタグのすべての要素を選択するため、特定性が低い。

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector は、CSS セレクタに一致する最初の要素を選択します。柔軟性が高く、任意の有効な CSS セレクタで要素を検索可能です。
用途: 任意の CSS セレクタの最初の一致を選択するのに最適。
戻り値: 最初に一致した要素、または一致しない場合は null。

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll はCSS セレクタに一致するすべての要素を選択し、静的な NodeList を返します。他のメソッドと異なり、DOM が変更されても自動的に更新されません。
用途: 複雑なセレクタで複数の要素を選択するのに最適。
戻り値: 自動更新されない静的な NodeList。

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

これらのメソッドの違い

戻り値の型

ライブコレクションと静的コレクション

CSSセレクタ

パフォーマンス

実践例：フォームバリデーション

これらのメソッドを組み合わせて、クラスを使って無効なフォームフィールドをハイライトする実践的なシナリオを紹介。

getElementById メソッドはフォーム要素を選択し、querySelectorAll はクラス .input-field を持つすべての入力フィールドを取得。フォームの「submit」イベントにイベントリスナーを設定し、デフォルトの送信を防止して各入力フィールドを確認。空欄の場合は赤い枠で強調表示し、入力済みの場合は緑色の枠で表示。ユーザーに即時の視覚的フィードバックを提供。