DOM（Document Object Model）は、HTMLやXML文書をプログラムから操作するための仕組みです。Webページの構造や内容、スタイルをJavaScriptなどで動的に変更できる基盤となる概念を、初心者にもわかりやすく解説します。
DOMの基本概念
DOM（Document Object Model）とは、WebページやXML文書を「ツリー構造」として表現し、プログラムからその要素や属性、テキストなどを操作できるようにする仕組みです。
ブラウザはHTMLやXMLを読み込むと、内部的にDOMを構築し、それをJavaScriptなどからアクセスできるようにします。
DOMの構造
DOMは「ノード（Node）」と呼ばれる単位で構成されます。主なノードの種類は以下の通りです。
- ドキュメントノード：文書全体を表すルート
- 要素ノード：
<div>や<p>などのHTML要素 - テキストノード：タグの中のテキスト部分
- 属性ノード：要素に設定された属性（class、idなど）
- コメントノード：
<!-- -->内のコメント
DOMとHTMLの関係
HTMLはあくまで静的なテキストですが、DOMはそれをブラウザが解釈して構築したデータモデルです。
JavaScriptは直接HTMLを編集するのではなく、DOMを通じて操作します。
例：HTMLとDOMの関係
<p id="message">こんにちは</p>JavaScriptでDOMを操作すると
document.getElementById("message").textContent = "Hello World!";ブラウザ上では「こんにちは」から「Hello World!」に変更されます。
DOMの主な操作例
DOMを利用すると、Webページを動的に変更できます。
要素の取得
const heading = document.querySelector("h1");テキストの変更
heading.textContent = "新しい見出し";スタイルの変更
heading.style.color = "red";要素の追加
const newItem = document.createElement("li");
newItem.textContent = "新しい項目";
document.querySelector("ul").appendChild(newItem);DOMのメリット
- 動的なページ更新（再読み込み不要）
- ユーザー操作への応答（クリックや入力に応じて変更）
- HTMLやCSSのリアルタイム操作
- アニメーションやインタラクションの実装が可能
DOMの注意点
- 操作が多すぎるとパフォーマンス低下の原因になる
- 大きなDOMツリーを頻繁に更新すると処理が重くなる
- 仮想DOM（Reactなど）が登場した背景はこのパフォーマンス問題の解決策
まとめ
DOMはWebページをプログラムから操作するための重要な仕組みで、JavaScriptと組み合わせることで動的でインタラクティブなサイトを作る基盤となります。DOMを理解することは、フロントエンド開発の第一歩です。
