第2回　ブラウザからHTMLはどう見えているかを理解しよう～ドキュメントツリー～

益子貴寛

2007.07.18

　DOMではHTMLを自由に操れることを紹介してきましたが，ここでは，その仕組みを学んでいきましょう。

　ブラウザはHTMLを読み込むと，内部的にドキュメントツリーを構成します。次のHTMLを例に具体的なドキュメントツリーを見てみましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ドキュメントツリー</title>
</head>
<body>
<h1>ドキュメントツリー</h1>
<p>HTMLの要素の構造を表します。</p>
</body>
</html>

図1●Internet Explorer 7のドキュメントツリー

　図1はInternet Explorer 7の場合におけるドキュメントツリーをイメージ化したものです。documentオブジェクトの下に，HTMLの要素がツリー上に並んでいますが，皆さんがHTMLを見たままの状態で，ブラウザも認識します。

　DOMを使ってHTMLの要素（タグ）を参照するためには，このドキュメントツリーを頭でイメージしながらコードを書く必要があります。HTMLコードを見たら，ドキュメントツリーがイメージできるようにしてください。

ノードの種類

　では，ここでドキュメントツリーの見方を理解しましょう。ドキュメントツリーの図にある四角の枠のことを"ノード"と呼びます。このノードにはいくつかの種類があります。図1ではノードに色を付けました。

　青色のノードのことを"要素ノード"と呼びます。わかりやすく言えば，HTMLのタグのことです。

　緑色のノードのことを"テキストノード"と呼びます。ドキュメントツリーでは，テキストに相当する部分を別のノードとして認識されます。H1要素のノードそのものが"ドキュメントツリー"というテキストを指しているわけではないことに注意してください。

ホワイトスペースノード

　先ほどはInternet Explorer 7が構成するドキュメントツリーをご紹介しましたが，実は，すべてのブラウザで同じドキュメントツリーを構成するわけではありません。もちろん，全く異なるドキュメントツリーが構成されるわけではありません。ほんのちょっとした違いがあるだけです。しかし，このちょっとした違いが，後ほどご紹介するDOMスクリプティングでトラブルの原因になってしまいますので，ここでその違いを解説していきます。

　今度はFirefox 2.0を使って，同じHTMLのドキュメントツリーを見てみましょう（図2）。