DOMとは何か（HTML/XMLの構造表現）

1. DOMの概要

DOM（Document Object Model）は、HTMLやXML文書をプログラムから操作可能なオブジェクトの集合として表現するための仕組みです。文書をツリー構造（木構造）でモデル化し、要素・属性・テキストを「ノード（Node）」として定義することで、プログラミング言語（JavaScriptなど）から直接操作できるようにします。
つまり、ブラウザが読み込んだHTMLやXMLを「プログラムが扱える形に変換したもの」がDOMです。

2. DOMのツリー構造

DOMでは文書全体を**ルート（documentオブジェクト）**から始まる階層構造として表します。

  • 要素ノード（Element Node）: <div>, <p>, <a> などのタグに対応

  • 属性ノード（Attribute Node）: id="main", class="title" などの属性に対応

  • テキストノード（Text Node）: 要素の中に含まれる文字列に対応

例えば、次のHTMLを考えます:

html
<!DOCTYPE html>
<html>
  <body>
    <p id="greeting">Hello, World!</p>
  </body>
</html>

この場合のDOMツリーは次のようになります:

  • document

    • html

      • body

        • p (id="greeting")

          • "Hello, World!"（テキストノード）

3. DOMの役割

DOMは、文書を動的に操作するための標準的なインターフェースを提供します。

  • 要素の取得: 例えば document.getElementById("greeting") で特定の要素を取得できる

  • 要素の変更: element.textContent = "こんにちは！"; のように内容を変えられる

  • 要素の追加・削除: document.createElement() で新しい要素を作成し、DOMに追加できる

4. DOMの特徴

  1. 言語非依存: DOM自体は言語に依存しない仕様（W3Cによる標準）であり、JavaScriptだけでなく、PythonやJavaなど他の言語からも利用可能です。

  2. ツリー構造の一貫性: 文書を階層的に表すため、複雑なHTML/XMLでも一貫して操作できる。

  3. 動的操作: ページの読み込み後でも、スクリプトによって構造や内容を自由に変更可能。

5. DOMの意義

もしDOMがなければ、ブラウザ上で文書をプログラムから操作することは困難です。DOMのおかげで、次のような操作が可能になります:

  • Webページのインタラクティブ化（ボタンを押したときに内容が変わるなど）

  • フォーム入力のリアルタイム検証

  • 動的に要素を生成・削除するアプリケーション（チャット、SPAなど）

ChatGPT5 生成日：2025/09/11