ツリー構造（ノードと階層）

DOM（Document Object Model）における「ツリー構造（ノードと階層）」は、HTMLやXML文書をプログラムで扱いやすいように表現するための基本的な考え方です。以下に詳しく説明します。

1. ツリー構造の概要

DOMは、文書をツリー構造として表現します。ツリー構造とは、木のように階層的に要素が並んでいるデータ構造のことです。最上位には「ルートノード」が存在し、その下に複数のノード（要素やテキストなど）が枝分かれする形で構成されます。

HTML文書の場合、最上位は常にdocumentオブジェクトに対応しており、その中に<html>要素をルートとした構造が展開されます。

2. ノード（Node）の種類

DOMにおける「ノード」は文書を構成する基本単位です。代表的な種類は次の通りです。

  • 要素ノード（Element Node）
    HTMLタグに対応するノード。例: <div>, <p>, <body>など。

  • テキストノード（Text Node）
    要素の中の文字列に対応するノード。例: <p>Hello</p> の "Hello" 部分。

  • 属性ノード（Attribute Node）
    要素の属性を表すノード。例: <img src="sample.png"> の src="sample.png"。

  • コメントノード（Comment Node）
    コメント部分 <!-- ... --> を表すノード。

3. 階層構造

DOMツリーは、ノード同士が「親子関係」や「兄弟関係」を持ち、階層を形成します。

  • 親ノード（Parent Node）
    直接上位にあるノード。
    例: <body>は<html>の子要素なので、<html>が親ノード。

  • 子ノード（Child Node）
    直接下位にあるノード。
    例: <p>は<body>の子ノード。

  • 兄弟ノード（Sibling Node）
    同じ親を持つノード同士。
    例: <h1>と<p>は両方とも<body>の子なので兄弟ノード。

4. DOMツリーの具体例

次のHTML文書を考えます。

html
<!DOCTYPE html>
<html>
  <head>
    <title>サンプル</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落テキスト</p>
  </body>
</html>

これをDOMツリーとして表すと以下のようになります。

bash
document
 └── html
      ├── head
      │    └── title
      │         └── "サンプル"
      └── body
           ├── h1
           │    └── "見出し"
           └── p
                └── "段落テキスト"

5. まとめ

  • DOMはHTML/XMLをツリー構造として表現する。

  • 文書はノード（要素・テキスト・属性・コメントなど）で構成される。

  • ノード間には親子関係や兄弟関係があり、階層的に管理される。

  • この構造により、JavaScriptなどのプログラミング言語で文書の要素を探索・操作できる。

ChatGPT5 生成日：2025/09/11