正しいHTMLとドキュメントツリーを理解しよう：DOMの基本を学ぼう（1）（1/3 ページ）

DOMを介してHTMLを操作する方法を理解しよう。そのためには、正しいHTMLの概念とドキュメントツリーを知る必要がある。

[羽田野太巳，＠IT]

旧来のDHTMLの手法では、JavaScriptから操作できるHTML要素には限りがありましたが、DOMでは、HTML上のありとあらゆる要素を自由自在に読み取ったり、書き換えることができるようになります。本連載では、おもにDOM Level 1で規定されている手法を使って、JavaScriptを使ってどのようにHTML上の要素へアクセスするのか、そして、それをどうやって書き換えるのかを詳しく解説していきます。JavaScriptからHTML要素を手に取るように操れるようになります。

ドキュメントツリーとは

　DOMスクリプティングでは、HTMLに関する正しい知識が求められます。まずは正しいHTMLとはなんなのかを理解していただきます。そして、DOMスクリプティングでは欠かすことができない、ドキュメントツリーという概念を学んでいきましょう。

本連載は、ソフトバンククリエイティブ刊行の『標準DOMスクリプティング』のうち「第2章 DOMの基本」を、同社の許可を得て転載するものです。

本書は、DOM（Document Object Model）とJavaScriptの関係を分かりやすく解説しています。さらに、JavaScriptからDOMを介して、いかにしてHTMLやXMLの操作ができるのかを紹介しています。またこれらのことを学びながら、クロスブラウザ対策の重要性も理解できるようになると思います。

なお、 Webでの連載として転載するに当たり、若干表現を変更している点があります（例えば「本書は」としている部分は「本連載は」としていることや図版などの省略など）。その点ご了承ください。

【注文ページへ】

妥当なHTMLとは？

　突然ですが、あなたはHTMLの文法を正しく理解していますか？ タグの本来の意味を理解していますか？ 自分が作ったHTMLが正しい文法になっているかをチェックしたことはありますか？ もしいずれも「いいえ」であれば、本節は非常に重要です。DOMスクリプティングをマスターする前に、しっかりと理解しておかなければいけない重要な話です。

　先ほどの質問で「いいえ」と答えた方は少なくないはずです。HTMLの文法を多少間違えたとしてもある程度はブラウザが適切に表示してくれるため、HTML文法のミスに気づかないことが多いといえます。そして、気にする必要もなかったのかもしれません。このブラウザの柔軟性が、かえって粗悪なHTMLをまん延させた原因ともいえるでしょう。

　ただ、必ずしも悪いことばかりではありません。この柔軟性のおかげでホームページ作成の敷居が低くなり、技術者だけでなく、一般の多くの人がホームページ作成を楽しむことができるようになったといえます。当時はそれでもよかったのです。ホームページとは、ブラウザを通して人の目で見るものでしたから。新聞の折り込みチラシと同じで、当時のホームページは文書というよりは絵といった方が近いかもしれません。ブラウザが表示する文字が美しくなかったため、多くの文字をイメージとして作成したサイトが数多く存在しました。中には、ほとんどがイメージでできているページもあったくらいです。

　また、HTMLタグの本来の意味を無視して、ブラウザがどのように画面上に表示するのかという基準でタグを選択することも多かったのではないでしょうか。人の目で見るのであればこれでもよかったわけです。当時のホームページの表現力には限界があったので、画像ばかりでページを構成する手法や、デコレーションのためにタグを選択するという手段が、最も合理的だったのでしょう。

　しかし現在は違います。ホームページは人の目だけが見るものではありません。ご存じの通り、検索エンジンは定期的にサイトを巡回して、キーワードによる重みづけをしています。巡回ロボットというソフトウェアがホームページを見るようになったというわけです。もしイメージばかりのページにロボットが遭遇したら、ロボットにはそのページがどのように見えているのでしょう。想像の通り、ロボットは絵そのものの意味を理解することはできませんので、結局のところ、ほとんど内容がないページに見えてしまうわけです。

　HTMLを解釈するのはロボットだけではありません。本書のテーマであるDOMでも、ブラウザというプログラムがHTMLを解釈します。ブラウザ内部では、画面上に表示するだけではなく、HTMLのタグを階層化してドキュメントツリーを構成します。JavaScriptなどのWeb開発系プログラミング言語から、HTMLコンテンツを自由に追加・編集・削除するといった操作は、ドキュメントツリー経由で行われます。

　もし、HTMLに文法ミスがあったとしましょう。それでもそのHTMLは、ブラウザ画面にはあなたが意図した通りに表示されるかもしれません。しかしそのHTMLは、あなたが意図した通りのドキュメントツリーとして、ブラウザに解釈されていないかもしれないのです。これは、プログラミング言語からHTMLの要素に正しくアクセスできなくなってしまうことを意味します。

　HTMLを作成する際には、文法チェッカーを使って、その都度、HTMLの妥当性を検証するよう心がけてください。

セマンティックなHTML

　以上、HTMLの妥当性が重要であることを説明してきましたが、もうひとつ重要なことがあります。それは「セマンティック」というキーワードです。わかりやすくいうと、タグの意味のことです。

　本来、HTMLタグにはそれぞれ文法的な意味があり、明確な目的を持っています。H1タグは見出しです。Pタグは段落です。BLOCKQUOTEタグは引用という意味を持っています。しかし、実際のWebサイトでは、これらの意味を無視した使い方をしていることが多いといえます。

　例えば、BLOCKQUOTEタグをインデントとして使うことが多いのではないでしょうか。BLOCKQUOTEタグは引用のために使うタグですので、インデントとして使うのは意味的に正しくありません。たまたまブラウザがBLOCKQUOTEタグの領域を右に寄せるため、このように間違った使い方をしているのでしょう。Pタグも同様です。このタグは段落を意味するもので、行間を空けるために使うのではありません。

　これらの例のように、ブラウザが標準で持っている表現方法を流用しようとしてタグを選択すると、そのHTML文書の本来の意味がなくなります。言い換えると、ロボットのようなプログラムが、そのページの意味を理解できなくなるのです。そのため、HTML内では、伝えるべき内容の掲載に徹するべきといえるのです。しかも、意味的に適切なタグを使って、適切な内容を掲載するべきなのです。そうすればHTMLはかなりすっきりするはずです。意味的に適切なタグを使ってばかりいては、ご存じの通り、見た目が非常に貧弱になってしまいます。しかしHTMLとしてはこれでよいのです。

　HTMLのコンテンツの表現方法を決定するのは、スタイルシートの役割です。HTMLタグではありません。事実、XHTMLでは、FONTタグといった表現としての役割しか果たさないタグは推奨されません。HTMLは内容に徹し、スタイルシートで体裁を整えるというように、明確に役割を分担します。これを実現するといくつかのメリットが出てきます。まず、ロボットのようなソフトウェアがHTMLを解釈しやすくなります。近年はやりのSEO対策にも絶大な効果が得られるようになります。さらに、本書のテーマであるDOMにも適したHTMLになるのです。

　さまざまなタグが入れ子になった複雑なHTMLを考えてみましょう。DOMスクリプティングでは、HTMLタグの構造を頭に入れてプログラミングする必要があるのはすでに述べた通りです。あまりに複雑なHTMLを操作しようとすれば、JavaScriptも複雑になってしまいます。いくらHTML文法が正しいからといって、デザインのためにタグを駆使するのは、百害あって一利なしといえます。デザインはスタイルシートに任せるようにしてください。

編集部注：書籍では、以下の文章が続きます。

本書では、XHTML 1.0 Transitionalを採用し、文字コードはUTF-8にします。DOMを扱ううえではとくにこれに限定する必要はありませんが、少なくともHTMLフォーマットはHTML4.0もしくはXHTML1.0にしてください。以上で前置きは終わりです。いよいよDOMスクリプティングの世界に突入です。

ただし本連載では、一部の表記をUTF-8にすると読者が混乱すると判断したため、Shift JISで表記しています。そのため、サンプルの例を利用するようなときは自身でUTF-8で入力し、試してください。