DOMとHTMLの違い（静的なマークアップ vs 動的なプログラミングインターフェース）

DOM（Document Object Model）とHTMLは密接に関係していますが、その性質と役割には明確な違いがあります。ここでは「静的なマークアップとしてのHTML」と「動的なプログラミングインターフェースとしてのDOM」の対比を詳しく説明します。

---

HTML: 静的なマークアップ

• 定義: HTML（HyperText Markup Language）は、Webページの構造を記述するためのマークアップ言語です。文書の内容（見出し、段落、リンク、画像など）を要素（タグ）として記述します。

• 特徴:

  • 静的であり、書かれた内容そのものをブラウザが解釈して表示する。

  • 人間が読みやすく、文書の論理構造を定義する。

  • ページの初期状態を決定する「設計図」に相当する。

例:

html
<h1>タイトル</h1>
<p>これは段落です。</p>

このHTMLは、ブラウザに「大見出し」と「段落」として表示されるだけで、動的な操作の概念は含まれません。

---

DOM: 動的なプログラミングインターフェース

• 定義: DOMは、ブラウザがHTMLやXMLを読み込んだ際に内部で構築する「ツリー構造のオブジェクトモデル」です。
  つまり、HTMLをプログラムから操作可能な形に変換したものです。

• 特徴:

  • 動的であり、JavaScriptなどのプログラミング言語を使って要素を追加・変更・削除できる。

  • ノード（Element, Text, Attribute, Documentなど）として階層構造を持つ。

  • APIを通じて、ユーザー操作やイベントに応じて文書内容を変更可能。

例: JavaScriptによるDOM操作

html
<p id="msg">こんにちは</p>
<script>
  document.getElementById("msg").textContent = "こんばんは";
</script>

この場合、HTMLに書かれているのは「こんにちは」ですが、DOMを通じてJavaScriptが実行されると表示は「こんばんは」に書き換わります。

---

HTMLとDOMの違い（まとめ）

---

まとめ

HTMLは「ページの内容と構造を定義する静的なマークアップ」、DOMは「その内容をプログラムから操作可能にした動的なオブジェクトモデル」です。両者は補完的な関係にあり、HTMLがなければDOMは生成されず、DOMがなければJavaScriptなどによる動的なページ操作は実現できません。