はじめに
リッチインターネットアプリケーション（RIA：Rich Internet Application）のクライアントサイド開発を学ぶうえで重要なのは、ドキュメントオブジェクトモデル（DOM：Document Object Model）の操作方法を習得することです。DOMとは、Webページのすべての要素にアクセスするための仕組みです。ブラウザ内では、段落、フォーム、テーブルなど、Webページ全体がオブジェクト階層として表されており、JavaScriptを使って、ページの要素の作成、変更、削除を動的に実行できます。
この記事は、『JavaScript for Programmers』という本の第10章の抜粋です。DOMの入門記事として、以下の内容を取り上げます。
- JavaScriptとW3CのDOMを使って動的なWebページを作成する方法
DOMノードとDOMツリーの概念- XHTMLドキュメント内の要素の操作、編集、変更を行う方法
- CSSのスタイルを動的に変更する方法
- JavaScriptによるアニメーション効果の作成方法
こうした知識と技術を身に付けることで、より強固なクライアントサイドアプリケーションを構築できるようになるはずです。
この章は、『JavaScript for Programmers』（Paul J. Deitel、Harvey M. Deitel共著、Prentice Hall Professional刊）からの抜粋です（2009年3月16日発行、ISBN 0137001312、Copyright 2009 Pearson Education, Inc.）。同書の詳細については、InformIT:JavaScript for Programmersを参照ください。Safari Books Onlineをご利用の方は、Safari Books Online - JavaScript for Programmers: DeitelR Developer Seriesで同書をお読みいただけます。
概要
この章では、「ドキュメントオブジェクトモデル（DOM：Document Object Model）」について取り上げます。DOMとは、Webページのすべての要素にアクセスするための仕組みです。ブラウザ内では、段落、フォーム、テーブルなど、Webページ全体が「オブジェクト階層」として表されており、JavaScriptを使って、ページの要素の作成、変更、削除を動的に実行できます。
かつては、Internet ExplorerもNetscapeも、DOMと同様の機能を提供するダイナミックHTMLというものをそれぞれサポートしていました。しかし、Internet ExplorerとNetscapeのダイナミックHTMLは機能的に重なる部分も多かったものの、モデル間の互換性はありませんでした。そこでW3Cは、複数ブラウザでのWebサイトの互換性を高める目的で、標準化したDOMを策定しました。現在では、FirefoxやInternet Explorer 7など、主要ブラウザの多くが、W3CのDOMの機能のほとんどを実装しています。
この章ではまず、DOMノードとDOMツリーの概念について説明します。次に、DOMノードのプロパティとメソッド、およびdocumentオブジェクトのメソッドを取り上げます。さらに、スタイルのプロパティを動的に変更する方法を紹介します。ユーザーが指定した背景色に変更したり、アニメーション効果を加えたりなど、さまざまな効果を作り出すことが可能です。最後に、オブジェクト全体の階層図を示し、各種のオブジェクトやプロパティについての説明と、追加情報が得られるWebサイトへのリンクを紹介します。
DOMでは、XHTMLの各要素をオブジェクトとして扱い、XHTML要素のさまざまな属性をオブジェクトのプロパティとして扱うことができます。JavaScriptのスクリプトを使って、こうしたオブジェクトをid属性に基づいて操作することで、動的な効果を作り出すことができます。
ドキュメントのモデル化：DOMノードとDOMツリー
前章までで取り上げたように、ページ内の特定の要素にアクセスするには、documentオブジェクトのgetElementByIdメソッドを使うのが最も簡単です。このセクションと次のセクションでは、このメソッドで得られるオブジェクトについて、もう少し詳しく見ていきましょう。
getElementByIdメソッドが返すのは「DOMノード」というオブジェクトです。DOMノードとは、Webブラウザ内でXHTMLページの各要素をモデル化したものです。そして、ドキュメントのすべてのノードを階層状に構成したものが、Webページの「DOMツリー」です。DOMツリーでは、ページ内の要素どうしの関係が分かります。ノードどうしの間には親子関係があります。すなわち、あるXHTML要素が別の要素の中に含まれている場合、内側の要素が「子」、外側の要素が「親」ということになります。1つの親ノードが複数の子を持つことはありますが、子ノードの親は必ず1つに決まります。同じ親を持つノードどうしのことを「兄弟」と呼びます。
ブラウザによっては、ドキュメントのDOMツリーを視覚的に確認できるツールを備えているものもあります。例えばFirefoxの場合、インストール時の指定により、XHTMLドキュメントのDOMツリーを表示する「DOM Inspector」というツールをインストールできます。このツールを起動するには、Firefoxの［ツール］メニューの［DOM Inspector］をクリックします。メニューに［DOM Inspector］が表示されない場合は、Firefoxのインストーラを起動し、［セットアップの種類］で［カスタムインストール］を選択し、［コンポーネントの選択］画面で［DOM Inspector］チェックボックスをオンにします。
Internet Explorerの場合は、Microsoft製の「Developer Toolbar」というツールバーを使用してドキュメントのDOMツリーを表示できます。このツールバーは 公式サイトからダウンロードできます。ツールバーをインストールしたら、ブラウザを再起動し、ツールバーの右側のアイコンをクリックし、メニューの［IE Developer Toolbar］を選択します。次ページの図10.1は、FirefoxのDOM InspectorおよびIEのDeveloper ToolbarでXHTMLドキュメントとそのDOMツリーを表示したときの例です。
このXHTMLドキュメントは、いくつかの簡単な要素で構成されています。ここでは、FirefoxのDOM Inspectorでの表示を例に説明していきますが、IEのツールバーでも表示はおおむね同じです。各ノードは、ノード名の横の［+］ボタンと［-］ボタンを使って展開と折り畳みが可能です。次ページの図10.1（b）が、ドキュメントの全ノードを完全に展開した状態です。ツリーの最上部にあるドキュメントノード（画面上では#document）のことをルートノードといい、親がありません。その下のHTMLノードは、ドキュメントノードより1段下がっており、その子であることを示しています。HTMLノードはhtml要素（7～24行目）を表します。
HEADノードとBODYノードは同じHTMLノードの子であり、つまり兄弟です。HEADノードは2つの#commentノードを子に持ち、これは5～6行目のコメントに該当します。TITLEノードの子は#textノード1つで、その中身はDOM Tree Demonstrationというテキストです。このテキストは、ノードを選択したときにDOM Inspectorの右側のペインに表示されます。BODYノードは、ページ内の各要素に該当するノードを子として持ちます。なお、LIノードはULノードの中にネストされているため、その子となっています。
1 <''?xml version'' = "1.0" ''encoding'' = "utf-8"''?''> 2 <''!DOCTYPE html PUBLIC'' "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 10.1: domtree.html --> 6 <!-- Demonstration of a document's DOM tree. --> 7 <''html xmlns'' = "http://www.w3.org/1999/xhtml"> 8 ''<head>'' 9 ''<title>''DOM Tree Demonstration''</title>'' 10 ''</head>'' 11 ''<body>'' 12 ''<h1>An XHTML Page</h1>'' 13 ''<p>''This page contains some basic XHTML elements. We use the Firefox 14 DOM Inspector and the IE Developer Toolbar to view the DOM tree 15 of the document, which contains a DOM node for every element in 16 the document.''</p>'' 17 ''<p>''Here's a list:''</p>'' 18 ''<ul>'' 19 ''<li>''One''</li>'' 20 ''<li>''Two''</li>'' 21 ''<li>''Three''</li>'' 22 ''</ul>'' 23 ''</body>'' 24 ''</html>''
