■「まえがき」より
近年、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.1.3 DOMの実例 (P7)
［改訂前］
<body>
<h1>DOMスクリプティング入門</h1>
<h2>目次</h2>
<div>
<li id="toc1">第一章</li>
<li id="toc2">第二章</li>
<li id="toc3">第三章</li>
</ul>
</body>
［改訂後］
<body>
<h1>DOMスクリプティング入門</h1>
<h2>目次</h2>
<ul>
<li id="toc1">第一章</li>
<li id="toc2">第二章</li>
<li id="toc3">第三章</li>
</ul>
</body>
▼3.2.1 フォーム (P100) 「FORMタグ要素のメソッド」表内
［改訂前］
submit()
フォームを送信します。引数、戻り値はありません。呼び出した時点で実行されます。submitタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
［改訂後］
submit()
フォームを送信します。呼び出した時点で実行されます。submitタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
▼3.2.1 フォーム (P100) 「FORMタグ要素のメソッド」表内
［改訂前］
reset()
フォームを初期値にリセットします。引数、戻り値はありません。呼び出した時点で実行されます。resetタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
［改訂後］
reset()
フォームを初期値にリセットします。呼び出した時点で実行されます。resetタイプのINPUTタグボタンと同じ動作をします。引数、戻り値はありません。
▼3.2.1 フォーム (P103) 図の差し替え
［改訂前］
▼elementsプロパティ
［改訂後］
▼elementsプロパティ
▼3.2.3 フォーム (P109) radio1.html
［改訂前］
<h2>▼性別</h2>
［改訂後］
<form action="#" id="form1" method="get">
<h2>▼性別</h2>
▼4.4.2スタイル・シートへのアクセス (P175) 上から20行目あたり
［改訂前］
if( stylenode.sheet ) {
/* スタイル・シートのオブジェクト */
var stylesheet = linknode.sheet;
［改訂後］
if( stylenode.sheet ) {
/* スタイル・シートのオブジェクト */
var stylesheet = stylenode.sheet;
▼4.4.2スタイル・シートへのアクセス (P176) 下から3行目
［改訂前］
たとえば、LINK要素のstyle属性値であれば、linknode.sheet.typeでなくても、linknode.typeで得られます。
［改訂後］
たとえば、LINK要素のtype属性値であれば、linknode.sheet.typeでなくても、linknode.typeで得られます。
▼4.4.2スタイル・シートへのアクセス (P176) 下から1行目
［改訂前］
属性プロパティでtype属性値を取り出す場合は、linknode.mediaとなりますが、
［改訂後］
属性プロパティでmedia属性値を取り出す場合は、linknode.mediaとなりますが、
▼5.1.1 イベント・フロー (P197) 図：イベントフローのフェーズ
▼5.1.3 イベントを捕捉する (P201) addEventListener.html
［改訂前］
<link href="eventhandler.css" type="text/css" rel="stypesheet" />
［改訂後］
<link href="eventhandler.css" type="text/css" rel="stylesheet" />
▼5.1.3 イベントを捕捉する (P201) addEventListener.js
［改訂前］
box.stype.backgroundColor = '#ffffff';
［改訂後］
box.style.backgroundColor = '#ffffff';
▼5.1.3 イベントを捕捉する (P201) 下から3行目
［改訂前］
addEventListener1.jsでは、window.onloadによって、
［改訂後］
addEventListener.jsでは、window.onloadによって、
▼5.1.4 DOMによるJavaScriptの完全分離 (P204) dom.jsのdom.event.removeEventListener内
［改訂前］
box.removeEventListener(type, func, false);
［改訂後］
elm.removeEventListener(type, func, false);
▼5.1.4 DOMによるJavaScriptの完全分離 (P205) addEventListener2.html
［改訂前］
<link href="eventhandler.css" type="text/css" rel="stypesheet" />
［改訂後］
<link href="eventhandler.css" type="text/css" rel="stylesheet" />
▼5.1.4 DOMによるJavaScriptの完全分離 (P205) addEventListener2.js
［改訂前］
box.stype.backgroundColor = '#ffffff';
［改訂後］
box.style.backgroundColor = '#ffffff';
▼5.2.4 キーボード・イベント (P245/246の切れ目) KeyboardEvents.js
［改訂前］
/* デフォルト・アクションを抑止する */
［改訂後］
/* デフォルト・アクションを抑止する */
dom.event.preventDefault(evt);
▼6.2.4 セレクトリンク (P284) selectlink2.js
［改訂前］
var select = document.getElementById('selectlink').
getElementsByTagName('SELECT').item(0);
［改訂後］
var select = document.getElementById('selectlink').getElementsByTagName('SELECT').item(0);
※紙面上、コードの途中で改行されて印刷されておりますが、実際には1行で記述します。
