Webフロントエンド - 基礎

DOM（Document Object Model）どむ

HTMLJavaScriptノードツリー構造ブラウザイベント

DOMについて教えて

簡単に言うとこんな感じ！

DOMはブラウザがHTMLを「木の枝」みたいな構造に変換したもので、JavaScriptがページの中身を読んだり書き換えたりするための「取扱説明書＋リモコン」みたいなものだよ！これがあるから「ボタンを押したら文字が変わる」みたいな動きが実現できるんだ！

DOMとは

DOM（Document Object Model） とは、HTMLやXMLで書かれた文書を、プログラムから操作しやすいようにツリー状のオブジェクト構造として表現したものです。ブラウザはWebページを読み込むと、HTMLのタグをそれぞれ「ノード（node）」という部品に変換し、親子関係をもつ木構造（ツリー）として内部に保持します。

JavaScriptはこのDOMを通じてページの要素を取得・変更・追加・削除できます。たとえば「見出しの文字を書き換える」「クリックしたときに色を変える」「入力内容に応じてリストを更新する」といった操作はすべてDOMの操作です。DOMはプログラムと画面表示をつなぐインターフェースの役割を果たしています。

DOMはブラウザに固有の技術ではなく、W3CおよびWHATWGによって仕様が標準化されています。そのためChrome・Firefox・Safari・Edgeのどのブラウザでも共通の考え方で操作できます。現代のWebアプリケーション開発において、ReactやVueといったフレームワークもDOMを内部で制御することで動的なUI（ユーザーインターフェース）を実現しています。

DOMのツリー構造と主なノードの種類

HTMLを読み込んだブラウザが生成するDOMツリーは、以下のような階層構造になっています。

document
└── <html>
    ├── <head>
    │   └── <title>  →  "ページタイトル"（テキストノード）
    └── <body>
        ├── <h1>  →  "見出し"（テキストノード）
        └── <p>   →  "本文テキスト"（テキストノード）

主なノードの種類

ノード種別	説明	例
Documentノード	ツリー全体の根（ルート）	`document` オブジェクト
Elementノード	HTMLタグひとつひとつ	`<div>` `<p>` `<a>` など
Textノード	タグの中のテキスト	`"こんにちは"` など
Attributeノード	タグの属性	`class="btn"` `href="..."` など
Commentノード	HTMLのコメント	`<!-- コメント -->`

よく使うDOM操作のJavaScript例

// 要素を取得する
const title = document.getElementById('main-title');

// テキストを書き換える
title.textContent = '新しいタイトル';

// クラスを追加する
title.classList.add('highlight');

// 新しい要素を作って追加する
const newItem = document.createElement('li');
newItem.textContent = '追加項目';
document.querySelector('ul').appendChild(newItem);

覚え方のコツ

「DOM = ドキュメントのオブジェクト化されたマップ」と覚えると◎。HTMLという”地図の原稿”をブラウザが”立体模型（ツリー）“に組み立てて、JavaScriptがその模型を自由に触れるようにしたもの、と考えるとわかりやすいです。

歴史と背景

1995年頃 — ブラウザ戦争時代。NetscapeとInternet Explorerがそれぞれ独自のDOM実装を持ち、ブラウザごとにJavaScriptの動作が異なる問題が深刻化
1998年 — W3Cが DOM Level 1 を勧告。HTMLとXMLの文書構造への共通アクセス方法を初めて標準化
2000年 — DOM Level 2 勧告。イベントモデル（クリックなどのイベント処理）やCSSスタイルへのアクセスが追加される
2004年 — DOM Level 3 勧告。XPathやキーボードイベントのサポートが拡張
2009年頃〜 — WHATWGが DOM Living Standard として継続的に仕様を更新する方式に移行。現在もこの形式でメンテナンス中
2013年〜 — ReactのVirtual DOM（仮想DOM）が登場。DOMの直接操作を最小限にする設計思想が普及し、フロントエンド開発のスタイルが大きく変わる
現在 — ブラウザ間の互換性は大幅に向上。モダンブラウザはほぼ同じDOM APIをサポート

DOM・仮想DOM・Shadow DOMの比較

現代のWeb開発では「DOM」という言葉に関連する概念がいくつかあります。混同しやすいので整理しておきましょう。

発注・選定時に知っておきたいポイント

観点	ポイント
パフォーマンス	DOM操作が多い画面はVirtual DOMを使うReact/Vueが有利
シンプルな更新	静的なページやCMSサイトは直接DOM操作で十分
コンポーネント再利用	Shadow DOMを使うWeb Componentsで独立した部品を作れる
保守性	DOMを直接触るコードが散乱すると管理が難しくなる

規格	内容
DOM Living Standard（WHATWG）	現在のDOM仕様の本家。WHATWGがリアルタイムで更新する「生きた標準」
DOM Level 2 Core（W3C）	2000年にW3Cが勧告した旧仕様。イベントモデルを初めて標準化
HTML Living Standard（WHATWG）	HTMLとDOMの統合仕様。DOM APIの多くがここでも定義される