第1回 正しいHTMLとドキュメントツリーを理解しよう
羽田野太巳
2008/3/12
■ドキュメントツリーの概念
ここでは、ドキュメントツリーというキーワードを解説します。DOMスクリプティングにおいては非常に重要なキーワードですので、しっかりと理解してください。
まずは次の簡単なHTMLをごらんください（documet_tree.html）。
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <title>ドキュメントツリーサンプル</title> <link href="style.css" type="text/css" rel="stylesheet" /> </head> <body> <h1>DOMとは</h1> <p>DOMは<em>W3C</em>によって策定されました。</p> </body> </html> |
このHTMLは、HEADタグ内にMETAタグ、TITLEタグ、LINKタグが入っています。また、BODYタグには、H1タグ、Aタグが入っています。ブラウザは、このHTMLのタグの構造をドキュメントツリーとして解釈します。
■ノードとは
DOMでは、HTMLの中にあるすべてを「ノード」という単位で区切ります。
<html>、<body>、<h1>、<p>といったHTMLタグや、コメント、属性、テキストすべてがノードです。
DOMではノードをいくつかのタイプに分類しています。ここでは、HTMLに関係が深いタイプを覚えてください。
| 要素ノード | HTMLタグを表します。DOMでは、HTMLタグのことを「要素」と呼びます。 |
| 属性ノード | タグ内に記述されている属性を表します。Aタグのhref属性やIMGタグのsrc属性などが該当します。 |
| テキストノード | タグではない文字の部分を表します。 |
| ドキュメントノード | HTML文書全体を表します。JavaScriptでは、documentオブジェクトがドキュメントノードを参照します。 |
| ノードのタイプ | |
DOMスクリプティングでは、要素ノードとテキストノードの違いをしっかりと理解する必要があります。
次のHTMLをノードに分解するとどうなるでしょうか。
| <h1>DOMとは</h1> |
このHTMLには、H1タグという要素ノードだけではなく、"DOMとは"というテキストノードも存在している点に注意してください。先ほどのHTML（document_tree.html）をドキュメントツリーとしてどのように解釈するのかをFirefoxで見てみましょう。
■ドキュメントツリーの構造
ツリーの最上階はdocumentとなります。documentとはこのHTML全体を表します。その下に、HTMLタグを表す要素ノードが配置されます。そしてその下にHEADタグ要素ノード、BODYタグ要素ノードが配置されます。このように、HTMLの階層構造がそのままツリー上に構成されていきます。このツリーを構成するポイントが、先ほど解説したノードに相当します。H1タグ要素ノードの下にさらに、"DOMとは"という文字を表すテキストノードが配置される点に、十分に理解してください（図1）。
 |
| 図1 Firefoxのドキュメントツリー。画面をクリックすると拡大して表示します |
■ホワイトスペースノードとは
ドキュメントツリーの図を見て、文章がなにも入っていないテキストノードがいくつか存在していることに気づいたのではないでしょうか。実は、これらテキストノードには改行が含まれています。DOMでは、ホワイトスペース（スペースやタブ）や改行も、ドキュメントツリーを構成する際にテキストノードとして認識されます。このようなテキストノードのことを「ホワイトスペースノード」と呼びます。
HTMLを見やすくするために、このサンプルのように改行を入れたり、スペースやタブを使ってインデントすることが多いと思いますが、これらすべてがホワイトスペースノードとして構成されます。もしこのサンプルHTMLが、改行を一切入れずに1行で記述されていれば、当然、これらホワイトスペースノードはドキュメントツリー上に現れることはありません。
このドキュメントツリーは、Firefoxの「DOM Inspector」で確認することができます。
 |
| 画面1 Firefox DOM Inspector |
 |
さまざまなドキュメントツリー |  |
| 【転職体験談】「もっと多くのユーザーに使って欲しい」⇒ mixiへの転職に成功！ 8年間のSIer生活で得た経験とスキルを生かして転職活動。評価のポイントはどこ？ |
| 【経営戦略】⇒「いつか勉強しよう」ではなく「いまこそ勉強すべき」スキル 50％のユーザー企業が「戦略を立案できるIT技術者」と仕事をしたがっている |
| 気になる「社会人大学院」という選択肢 仕事との両立は本当に可能？ 独学とは何が違う？ 実際の学生・卒業生6人に聞いた |
 |
|
|
|
|
 ITトレメ |
1日1問、模擬試験問題をメールで届けます |
| ラーニングカレンダー |
ITスキル研修4000件、最新情報の検索できます |
スキルアップ／キャリアアップ（JOB@IT）
スポンサーからのお知らせ
･ｹ･ｭ･�ﾁﾏﾂ､ｸｦｵ貍ｼ･ｹ･ﾝ･ｵ｡ｼ
- - PR -
お勧め求人情報
| ◆クライアント企業から求められる人材 ⇒IT技術と経営戦略を併せ持つ「戦略家」 New！ |
||
| ◆気になる社会人大学院。興味はあるけど仕 事と両立可能？実際に通った6人に聞いた |
||
|
IE9、HTML5やCSS3、SVG対応を大幅強化へ