JavaScript: DOM 入門
最終更新：2026-10-13
DOM は JavaScript と Web ページをつなぐ唯一の橋です。DOM がなければ、JS は純粋な計算言語でしかありません。DOM があれば、JS はページを「見て」、修正し、命を吹き込むことができます。
1. DOMツリーとdocumentオブジェクト
DOM は Document Object Model の略です。ブラウザが HTML を読み込むと、プレーンテキストとして保存するのではなく、オブジェクトツリーに変換します。各 HTML タグはオブジェクト（ノードと呼ばれる）になり、タグ間のネスト関係はツリーの親子関係になります。
DOM は逆さまの木のように考えてください。最も上には根（document）があり、枝分かれして幹（html、head、body）に、さらに葉（div、p、span...）へと続きます。
(2) DOM ツリー構造
シンプルな HTML ページの DOM ツリーはおおよそこのようになります。
HTML
document
└── html
├── head
│ ├── meta
│ └── title
└── body
├── h1
├── p
└── div
└── span
documentは DOM ツリーのルートノードで、JS が DOM にアクセスするためのエントリポイントですhtmlはdocumentの唯一の子要素（ドキュメント要素）ですheadとbodyはhtmlの2つの子要素です- そこから層ごとにネストが続き、完全なツリーを形成します
(3) ノードタイプ
DOM には3つのコアノードタイプがあります。
| ノードタイプ | 説明 | nodeType 値 |
|---|---|---|
| 要素ノード | HTML タグ（例：p、div） |
1 |
| テキストノード | タグ内のテキストコンテンツ | 3 |
| 属性ノード | タグの属性（例：class、id） |
2（一般的な使用は非推奨） |
HTML
<p class="intro">こんにちは世界</p>
この1行の中で：<p> は要素ノード、class="intro" は属性ノード、こんにちは世界 はテキストノードです。日常的な開発では、要素ノードが最も多く扱われます。
(4) document オブジェクト
document は DOM へのエントリポイントです。ブラウザがこのグローバルオブジェクトを自動的に提供します。これにより以下が可能です。
- ページ要素へのアクセス：
document.getElementById()、document.querySelector() - 新しい要素の作成：
document.createElement() - ページコンテンツの読み書き：
document.title、document.body - ページイベントのリスニング：
document.addEventListener()
(5) DOM の役割
JS 自体は Web ページを「見る」ことはできません。計算することしかできません。DOM が「目」と「手」を提供します。
- 読み取り：ページからテキスト、属性、スタイルを取得
- 変更：テキストコンテンツ、属性値、CSS スタイルを変更
- 追加：新しい要素を作成してページに挿入
- 削除：ページから要素を削除
- リスニング：ユーザーのクリック、入力、その他のインタラクションに応答
DOM がなければ、JS と HTML は完全に別々のものになります。DOM がそれらを接続します。
(6) サンプル：DOM 構造の確認
▶ 試してみよう(7) サンプル：document オブジェクトの探索
▶ 試してみよう(8) サンプル：ノードタイプの識別
▶ 試してみよう❓ よくある質問
Q DOM は JavaScript の一部ですか？
A いいえ。DOM は W3C が定義した標準です。JavaScript はそれと対話するための API を提供しているだけです。Node.js には DOM がありません。なぜならブラウザ環境ではないからです。DOM と JS を混同するのは初心者によくある誤解です。
Q childNodes に空のテキストノードがあるのはなぜですか？
A HTML の改行やインデントは DOM ではテキストノードとして解析されます。例えば、2つのタグ間の空白はテキストノード（改行文字を含む）になります。要素ノードだけが必要な場合は、
childNodes の代わりに children を使いましょう。Q DOM の変更はページのパフォーマンスに影響しますか？
A はい。DOM の変更はすべてブラウザのリフローとペイントをトリガーできます。頻繁な DOM 操作はパフォーマンスのキラーです。ベストプラクティス：まずすべての変更をメモリ内で構築し、その後一括で DOM に書き込みましょう。
📖 まとめ
- DOMはHTMLのツリー表現。各HTMLタグがDOMノードに対応
documentがDOMの入口。document.getElementById()でID検索document.querySelector()はCSSセレクタで最初の一致を取得。querySelectorAllは全部- ノードの種類：要素ノード(HTMLタグ)、テキストノード(内容)、属性ノード(タグ属性)
- コアDOM操作：ノード検索、属性読み取り、内容変更、子ノードの追加/削除
📝 練習問題
- ブラウザの DevTools（F12）を開き、コンソールに
console.dir(document)と入力して、document オブジェクトのプロパティとメソッドを探索しましょう。認識できるか興味深いものを5つリストアップしてください。 - 現在のページの
body要素を取得し、そのchildElementCount（子要素の数）を出力してから、childrenを使ってすべての子要素をループし、それぞれのタグ名を出力するコードを書きましょう。 - 「要素ノード」と「テキストノード」の違いを説明してください。
<div>こんにちは <b>世界</b></div>が与えられた場合、そのノードツリー構造を描き、各ノードのタイプをラベル付けしてください。
