また、この例を見ると、ページ本体、段落、リストの内容を表す#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つのヘルパー関数です。ここからは、各ボタンの機能と、対応するイベントハンドラについて詳しく見ていくことにしましょう。