「まえがき」より

近年、Web2.0、Ajax、リッチクライアントといった新たな概念、技術手法などが取り上げられてきました。かつての手法では実現できなかった新たなWebアプリケーションやWebサービスが次々と立ち上がり、その効果も実証されてきました。
これらのWebアプリケーションやWebサービスには、ブラウザ側で動作するJavaScriptの存在は欠かすことができません。以前のように、デザイン（見た目）をよくするための表現を目的としたものだけではなく、動作や機能性を重視したものへと変貌しつつあります。JavaScriptによるリッチクライアント化は、今後、ますます重要になってくるでしょう。

かつてのJavaScriptは、ブラウザごとに実装が異なり、開発者はクロスブラウザ対策に悩まされてきました。また、リッチクライアント的な複雑な機能や動作にも限界がありました。さらに近年、SEO対策がさかんになり、HTML内部にJavaScriptのコードを埋め込むことすら敬遠される状況となっています。これまでのJavaScriptの手法だけでは、HTML内部にJavaScriptの断片すらまったく入れずに、高度な機能を実現することは非常に難しかったといえます。さらに、Ajaxの台頭により、JavaScriptでXMLをも扱うことが求められるようになってきました。

そこで、1 つの解決策が考案されてきました。それが本書のテーマとなるDOM（Document Object Model）です。

DOMはW3Cが策定した仕様ですが、その仕様書から引用すれば、「DOMとは、プログラムやスクリプトからダイナミックに、文書の内容・構造・スタイルにアクセセスでき、そしてそれをアップデートできる、プラットフォームや言語に依存しないインタフェースである」と説明されています。

近年、ボタンクリックやテキスト入力といったユーザーアクションにより、動的に画面が変化するようなWebアプリケーションをよく目にするようになったと思います。そう、GoogleのGmail、サジェスト、マップなどがこれにあたります。このようなアクションを実現するためには、前述の引用でいえば、「ダイナミックに文書の内容・構造・スタイルにアクセス・アップデートできる」という機能が必要になってきます。また、クロスブラウザ対策に悩むことなく、どのブラウザでも期待する動作を保証するためには、前述の引用でいえば、「プラットフォームや言語に依存しないインタフェース」が必要となるのです。

W3C DOMとはまさに、Web2.0、Ajax、リッチクライアントといった近年のキーワードを実現するために、縁の下を支える重要な技術なのです。今後、DOMなしに、リッチなアプリケーションは作れないといっても過言ではないでしょう。

W3C DOMの仕様書には「言語」にも依存しないとあります。W3C DOMはJavaScriptのためだけに策定されたものではありません。JavaScript以外にも、たとえば、FlashAction Script、Javaなどにも採用されています。W3C DOMは、今後のWebアプリケーションにおける標準仕様といってもよいでしょう。

リッチクライアントを実現するためには当然、ブラウザがW3C DOMに準拠していなければいけません。幸いなことに近年の主要なブラウザはW3C DOMに準拠してきており、環境の整備は着実に進んでいます。

本書ではJavaScriptに特化して、旧来のJavaScript手法と照らし合わせながら、W3CDOMの扱い方を解説していきます。また、コーディング・テクニックだけではなく、検索エンジンのロボット対策として注目されているSEO（Search Engine Optimization）に、DOMスクリプティングがどのようにかかわっていくのかについても、詳しく触れていきます。W3C DOMは、Webアプリケーション開発に携わるすべての人にとって、今後、必須の知識になるといえるでしょう。

あなたも、次世代Webアプリケーションの扉を開きませんか。本書がDOMスクリプティングによる新世界に誘います。

　本書で紹介するスクリプトは、実際にこちらでご覧になれます。本書の理解に役立てていただければ幸いです。

目次

第1章 DOMことはじめ

1.1 DOMとは

1.1.1 DOMの歴史

1.1.2 DOMの概要

1.1.3 DOMの実例

1.2 DOMのLevel

1.2.1 DOM策定の歴史

1.2.2 各Levelの概要

1.3 JavaScriptの基礎知識

1.3.1 オブジェクト

1.3.2 変数の局所化

1.4 JavaScriptのデバッグ

1.4.1 デバッガーはブラウザごとに準備しよう

1.4.2 Internet Explorer 6

1.4.3 Firefox 1.5

1.4.4 Opera 9.0

1.4.5 Safari

1.5 HTMLのチェック

1.5.1 HTMLのチェックにツールを活用しよう

1.5.2 Firefox Html Validator

1.5.3 Firefox DOM Inspector

1.5.4 Safari DOM Tree

第2章 DOMの基本 [Sample Script]

2.1 ドキュメントツリー

2.1.1 妥当なHTMLとは？

2.1.2 セマンティックなHTML

2.1.3 ドキュメントツリーの概念

2.1.4 ブラウザごとに異なるドキュメントツリー

2.2 コンテンツへのアクセス方法

2.2.1 HTMLタグ名から要素を参照する getElementsByTagName

2.2.2 id属性値から要素を参照する getElementById

2.2.3 name属性値から要素を参照する getElementsByName

2.2.4 タグの相対位置から要素を参照する

2.2.5 ノード参照時のエラーハンドリング

2.2.6 NodeListの用法にはご注意を

2.2.7 コンテンツアクセスの実践

2.3 タグ属性値の操作

2.3.1 属性プロパティによる操作

2.3.2 getAttribute/setAttributeメソッドによる操作

2.3.3 属性の存在を調べるattributesプロパティ

2.4 HTMLをダイナミックに書き換える

2.4.1 テキストを追加する createTextNode

2.4.2 タグを追加する createElement

2.4.3 ある要素の直前に追加する insertBefore

2.4.4 要素を削除する removeChild

2.4.5 要素を置き換える replaceChild

2.4.6 要素を複製する cloneNode

2.4.7 まとめて更新を行う DocumentFragment

第3章 HTML専用のDOM [Sample Script]

3.1 HTMLタグ要素のプロパティとメソッド

3.1.1 要素ノードオブジェクトのプロパティの使い方

3.1.2 インタフェース

3.2 フォームを操る

3.2.1 フォーム

3.2.2 テキストボックス／テキストエリア

3.2.3 ラジオボタン／チェックボックス

3.2.4 セレクトメニュー

3.3 テーブルを操る

3.3.1 テーブルのドキュメントツリー

3.3.2 テーブルを作る

3.3.3 テーブル操作の実践

第4章 スタイルシート [Sample Script]

4.1 CSSとDOM

4.1.1 DOMで規定されているスタイルシートの概要

4.1.2 スタイルシートの種類

4.1.3 DOMによるスタイルへのインタフェース

4.2 見た目を操作する

4.2.1 DocumentViewインタフェース

4.2.2 要素に適用されたCSSの値を抜き出す

4.2.3 要素に適用されたCSSの一覧を抜き出す

4.2.4 CSSプロパティ値を数値として取得する

4.3 個別のCSSルールを操作する

4.3.1 CSS2Propertiesインタフェース

4.3.2 CSS2Propertiesインタフェースのプロパティ

4.3.3 styleプロパティのDOM的な使い方

4.4 スタイルシートを操作する

4.4.1 StyleSheet/CSSStyleSheetインタフェース

4.4.2 スタイルシートへのアクセス

4.4.3 個別のCSSルールにアクセスする

第5章 イベント [Sample Script]

5.1 DOMのイベント・モデル

5.1.1 イベント・フロー

5.1.2 DOM Level 0のイベント・ハンドリング手法

5.1.3 イベントを捕捉する

5.1.4 DOMによるJavaScriptの完全分離

5.1.5 Eventインタフェース

5.1.6 デフォルト・アクション

5.1.7 イベントの伝播を抑止する

5.2 イベント・モジュール

5.2.1 イベント・モジュールとイベント・タイプ

5.2.2 HTMLイベント HTMLEvents

5.2.3 マウス・イベント MouseEvents

5.2.4 キーボード・イベント KeyboardEvents

第6章 DOMスクリプティングの実践 [Sample Script]

6.1 JavaScriptはつつましくあれ

6.1.1 DHTMLの問題点

6.1.2 つつましいJavaScriptとは？

6.1.3 階層の完全分離

6.1.4 グレイスフル・デグラデーション Graceful Degradation

6.1.5 オブジェクト検知

6.2 ロボットに優しいHTMLを目指して

6.2.1 HTMLにアクセスするのは誰？

6.2.2 ロボットにはHTMLがどんなふうに見えている？

6.2.3 バックリンク

6.2.4 セレクトリンク

6.2.5 画像ポップアップ

サンプルコードダウンロード

本書で紹介しているすべてのサンプルコードは、こちらからダウンロードしてください。

• dom_sample_code_20061228.zip 300 KB (307,881 バイト)

ダウンロードしたらzipファイルを解凍してください。scriptフォルダー内にindex.htmlがございますので、ブラウザーでアクセスすると、各章で紹介したサンプルへのリンクページが表示されます。

改訂履歴