DOMとは何か？／DOM要素の取得方法

---

【このページの内容】

• DOMとは（Document Object Model の基本）
• DOMを介してHTML要素を操作できる
• 要素の取得方法
• getElementById
• getElementsByClassName
• getElementsByTagName
• querySelector（現代JSの主流）
• querySelectorAll
• form要素の取得（document.forms）

• 値の取得・変更（value）

  DOMとは？

DOM（Document Object Model）は、HTMLをブラウザが読み込んだときに作られる「オブジェクト（木構造のデータ）」のことです。
JavaScript は、この DOM を通して HTML 要素を操作します。

できること：

• テキストを書き換える
• 画像を差し替える
• ボタンをクリックしたときに処理を実行する
• CSS を変更して見た目を変える
• 要素を追加・削除する

DOM は「JavaScript と HTML の橋渡し」役です。

---

DOM要素の取得方法

DOM を操作するためには、まず対象となる HTML の要素を取得する必要があります。

主な取得方法：

• getElementById
• getElementsByClassName
• getElementsByTagName
• querySelector
• querySelectorAll
• document.forms

---

getElementById() — ID を持つ要素を1つ取得

どんなときに使うか：

• ページ内に1つだけ存在する要素を取得したいとき （例：メインタイトル、メイン画像、フォームなど）

書き方：
const element = document.getElementById("demo");
console.log(element.innerText);

特徴：

• 高速で正確（最速の取得方法）
• id はページ内で一意
  
  

取得した要素に対して何ができる？

• テキスト変更
• CSS変更
• イベント登録
• 値の取得

---

getElementsByClassName() — クラス名でまとめて取得

どんなときに使うか：

• 同じクラス名を持つ要素をまとめて処理したいとき （例：リスト・商品カード・ボタンのグループ）

何ができる？

• 複数の要素に同じ操作（色変更、非表示など）
• for 文で順番に処理
• リアルタイムに DOM の変更が反映される（HTMLCollection の特徴）

書き方：
const items = document.getElementsByClassName("foo");
for (const el of items) {
  console.log(el.innerText);
}

特徴：

• 複数の要素を返す（HTMLCollection）
• 要素の数が変わると自動更新される

---

getElementsByTagName() — タグ名で複数取得

どういうもの？
指定した タグ名の要素を全て取得する

どんなときに使うか：

• ページ内の 全ての <li> を処理したい
• 全ての <div> や< p > のように、タグそのものに対して一括操作したい時

書き方：
const divs = document.getElementsByTagName("div");

特徴：

• HTMLCollection（複数の要素）
• タグ全体を操作したい時に便利
• ページが大きいと取得要素が増えるので使い方に注意

何ができる？

• 特定タグだけ色を変える
• 全てのリスト項目にスタイルを適用する
• 全ての <p> のテキストを一度に操作

---

querySelector / querySelectorAll（現代JavaScriptの主流）

CSS と同じ記法で DOM を検索できるため、
現在の JavaScript では最も広く使われる方法

⚠ CSS の書き方で DOM を検索しているだけで、
CSS の適用状態やスタイルは参照しません

querySelector：

どんなときに使う？

• クラスでも ID でもタグでも、条件に合う最初の1つだけ取得
• ID / class / タグを統一的に扱いたい時
• 複雑なセレクタを使いたいとき(例：ul li:first-child)

getElementById 代わりとしても使える！

例： const item = document.querySelector(“.box”);

querySelectorAll：

どんなときに使う？

• 条件に合うすべての要素を取得
• 複数要素を一括で扱いたい時（例：すべての .item を赤文字に）
• .item など複数のクラスをまとめて操作したい時
• 配列のように扱いたい時

forEach で簡単にループできるのが特徴

例： const items = document.querySelectorAll(“.box”);

---

form 要素の取得（document.forms）

どんなときに使う？

• ユーザー入力の値を取得したい
• フォーム内の input value を取りたい
• フォーム送信の前にチェックしたい

form.名前 のようにアクセスできてわかりやすい

例：
<form name="demoForm">
  <input id="title-id" name="title" type="text">
</form>

const form = document.forms.demoForm;
const title = form.title.value;

特徴：
form.name → このフォームを取得
form.要素名 → 中の input 要素にアクセスできる

---