• BPnet
  • ビジネス
  • IT
  • テクノロジー
  • 医療
  • 建設・不動産
  • TRENDY
  • WOMAN
  • ショッピング
  • 転職
  • ナショジオ
  • 日経電子版
  • PR

  • PR

  • PR

  • PR

  • PR

DOMから始めるJavaScriptモダン・スクリプティング

第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のドキュメントツリー

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

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

ノードの種類

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

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

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

ホワイトスペースノード

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

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

図2●Firefox 2.0のドキュメントツリー
図2●Firefox 2.0のドキュメントツリー

 Internet Explorer 7のドキュメントツリーと比べて,テキストノードが多く出現しているのがわかります。しかも,このテキストノードには,テキストがありません。これらのテキストノードは,実際には空ではなく,スペースや改行が含まれています。

 HTMLを記述する際に,見やすくするために改行を入れたり,行頭にタブやスペースを入れてインデントすることが多いでしょう。実は,この改行やタブ,スペースといったものまで,テキストノードとして認識されてしまうのです。このようなテキストノードのことを,"ホワイトスペースノード"と呼びます。

 Internet Explorer以外のメジャーなブラウザは,ホワイトスペースノードが現れます。しかし,すべてが同じ位置にホワイトスペースノードが現れるわけではありません。ブラウザによってバラバラというのが実情です。

 DOMスクリプティングでは,要素を特定する際に,上から数えて2番目とか,ある要素の隣といった具合に命令文を書くことがあります。しかし,このホワイトスペースの存在を忘れていると,期待する要素を抜き出すことができなくなってしまいますので,注意してください。

 ブラウザによっては,ドキュメントツリーを直接確認することができます。ここではいくつかのブラウザで,ドキュメントツリーを確認する方法をご紹介します。

Firefox 2.0 DOM Inspector

 Firefox 2.0にはDOM Inspectorと呼ばれるツールが実装されています。ツールバーから[ツール(T)]→[DOM Inspector(N)]を選択します。Ctrl+Shift+IでもDOM Inspectorを起動することができます(図3)。

図3●Firefox 2.0 DOM Inspector
図3●Firefox 2.0 DOM Inspector

Opera Developer Console

 Operaには標準では組み込まれていませんが,Opera Developer Consoleを別途インストールすることでドキュメントツリーを確認することができます。

図4●Opera Developer toolsのページ
図4●Opera Developer toolsのページ

 図4のページにOperaでアクセスします。このページに「Developer Console」というボタンがあります。このボタンを,マウスで,ボタンツールバー上にドラッグ&ドロップしてください。

図5●インストール前のOperaボタンツールバー
図5●インストール前のOperaボタンツールバー
図6●インストール後のOperaツールバー
図6●インストール後のOperaツールバー

 ドラッグ&ドロップするだけでインストールが完了します。新たに追加されたボタンを押すと,Opera Developer Consoleが表示されます(図7)。

図7●Opera Developer Console
図7●Opera Developer Console

 次回からは,ブラウザ上で構成されたドキュメントツリーをもとに,どのようにしてタグを参照するのかを具体的に見ていきます。

あなたにお薦め

連載新着

連載目次を見る

今のおすすめ記事

ITpro SPECIALPR

What’s New!

経営

アプリケーション/DB/ミドルウエア

クラウド

運用管理

設計/開発

サーバー/ストレージ

クライアント/OA機器

ネットワーク/通信サービス

セキュリティ

もっと見る