メインコンテンツへスキップ

ドキュメントツリー

1.ドキュメントツリー

ドキュメントツリー とは、
文書の要素を階層化して
枝分かれしたツリー構造に
構成した物です。

ドキュメントツリー とは、ソースドキュメントを HTML言語でエンコードされた要素を階層化して枝分かれしたツリー構造に構成した物の事です。無理して言い換えると、「元の文書を HTML言語で要素を読み解いて、その要素間の関係を木構造に表した図をドキュメントツリーと言います。」かな。
文書 ( ドキュメント ) 木構造図 ( ツリー ) と造語してみました。
このツリーの各要素には、親要素が1つだけあります。ただし、ルート要素には親要素がありません。HTML文書でのルート要素は、html要素です。ルート要素を言い換えると、基点要素です。

ドキュメントツリーは、ルートが document であるノードツリーです。

document
html
head
body
meta
title
h1
p
form
dfn
ul
span
table
li
li
caption
tbody
button
button
tr
th
td
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>ドキュメントツリー</title>
  6. </head>
  7. <body>
  8. <h1>ドキュメントツリー</h1>
  9. <p>
  10. <dfn>ドキュメントツリー</dfn>とは、文書の要素を階層化して枝分かれしたツリー構造に構成した物です。
  11. </p>
  12. <form>
  13. <ul>
  14. <li>
  15. <button>ボタン１</button>クリックすると空送信します。
  16. </li>
  17. <li>
  18. <button>ボタン２</button>クリックすると空送信します。
  19. </li>
  20. </ul>
  21. <span>ブロックとインラインの混在</span>
  22. <table>
  23. <caption>テーブル</caption>
  24. <tbody>
  25. <tr>
  26. <th>ヘッダ</th>
  27. <td>データ</td>
  28. </tr>
  29. </tbody>
  30. </table>
  31. </form>
  32. </body>
  33. </html>

このソースドキュメントを元に、要素を階層化して枝分かれしたツリー構造に構成した物が、上記のドキュメントツリーです。(属性やテキストノードは省略しています。)

１行目 <!DOCTYPE html>は、HTMLの要素ではないのでドキュメントツリーの対象外です。
10行目に dfn要素の外にテキストが p要素の内容としてありますが、ドキュメントツリーの段階では意識していません。描画の前の時点で、描画の為に仮想の纏まりが生成されますが、それについては別途に記述します。

ドキュメントツリー

ドキュメントツリーとは、文書の要素を階層化して枝分かれしたツリー構造に構成した物です。

  • クリックすると空送信します。
  • クリックすると空送信します。
ブロックとインラインの混在
テーブル
ヘッダ データ

body要素を div要素に, h1要素を h3要素に代えて、上記のソースドキュメントの body要素以下の描画を例示しました。
これを例と言うているのは、筆者である私はユーザーエージェントがどの様に描画するか意識せず、ただソースドキュメントを提示しているだけだからです。