また、この例を見ると、ページ本体、段落、リストの内容を表す#textノード以外にも、いくつかの#textノードが含まれていますが、それらの中身は単なる空白です。Firefoxの場合、XHTMLドキュメントをDOMツリーとして解析するときに、兄弟要素間の空白をテキストとして解釈し、DOMツリー上で#textノードとして配置してしまうのです。Internet Explorerの場合は、こうした空白は無視され、空の#textノードにはなりません。また、読者の皆さんがサンプルファイルをダウンロードしてこの例を実際に試してみると、BODYノードの子に#commentノードがあると思いますが、上の実行例のDOMツリーでは、FirefoxでもInternet Explorerでもそのノードはありません。これは、ダウンロードしたサンプルファイルでは末尾に著作権表記の行が入っているためです。
このセクションでは、DOMノードとDOMツリーの概念について説明しました。次のセクションでは、DOMノードについてもう少し掘り下げていき、DOMノードのメソッドとプロパティを使って、JavaScriptでドキュメントのDOMツリーを変更する方法について見ていきます。
DOMツリーの操作と変更
DOMを使ってドキュメントの要素を操作すると、イベントドリブンのJavaScriptでページの中身を動的に変更できます。このセクションでは、各DOMノードが持つプロパティとメソッドについて見ていきます。こうしたプロパティとメソッドを使うことで、DOMツリーの操作、ノードの変更、要素の動的な作成と削除などを実行できます。
図10.2は、DOMノードの機能とdocumentオブジェクトのメソッドを利用したプログラムの例です。getElementById以外にも2つのメソッドを新たに使用しており、要素の強調表示、変更、挿入、削除を行うことができます。
117～132行目が、XHTMLの基本的な要素を使ってページの中身を記述した部分です。各要素にはid属性を指定し、要素の中身としてもidを角かっこで囲んで記述しています。例えば、117～118行目のh1要素は、idを"bigheading"とし、見出しのテキストも先頭を[bigheading]としています。こうすることで、各要素のidをページ上でも把握できるようにしています。body要素内にはこのほか、h3の見出し、いくつかのp要素、順序なしのリストがあります。
body要素の残りの部分は、133～162行目のdiv要素に入っています。134行目がform要素の開始タグです。必須のaction属性には空文字列を指定し（サーバへの送信は行わない）、onsubmit属性ではfalseを返すよう指定しています。フォームのonsubmitハンドラがfalseを返すと、action属性で指定したアドレスへの移動は中止されます。こうすることで、変更前のXHTMLを再読み込みすることなく、JavaScriptのイベントハンドラでページを変更できるようにしています。
ページ上の要素の変更や操作を行うためのコントロールは、135～160行目のテーブルに収められています。6つのボタンはそれぞれ別個のイベント処理関数を呼び出し、ボタンの種類に応じた処理を実行します。
JavaScriptのコードの冒頭では2つの変数を宣言しています。1つ目のcurrentNode変数（27行目）は、現在選択中のノードを覚えておくための変数です。各ボタンの機能はこのノードに対して実行することになります。この変数は、body要素のonload属性（116行目）で、"bigheading"というidのh1要素に初期化しています。2つ目のidcount変数（28行目）は、新規作成した要素に一意のidを割り当てるための変数です。それ以降のJavaScriptコードは、XHTMLのボタンに対応するイベント処理関数と、それらから呼び出す2つのヘルパー関数です。ここからは、各ボタンの機能と、対応するイベントハンドラについて詳しく見ていくことにしましょう。
