標準DOMスクリプティング
JavaScript - DOMによるWebアプリデザインの基礎

本書のお求めはこちらから

あなたのJavaScriptはWeb2.0時代についてこれるか?

DOMで新時代のWebアプリを目指せ!

  • クライアントサイドでコンテンツをリッチに操る新技術
  • Ineternet Explorer 6/7、Firefox 1.5/2.0、Opera9.0、Safari 1.3/2.0対応

 futomi の 3 冊目の著書が完成しました!Perl/CGI本Ajax本に続き、今度は DOM (JavaScript) がテーマです。Webアプリケーション開発には欠かすことができない JavaScript を、DOM という切り口で、実践的なサンプルを通して詳しく解説しました。サーバサイドのアプリケーション開発者だけではなく、ウェブデザイナーまでを巻き込むDOMのテクニックは、ウェブに携わるすべての方に必須のテクニックとなっていくことでしょう。本書は、ある程度 JavaScript を使ったことがある方であれば理解できるよう、ステップバイステップで解説しています。ぜひ、あなたも DOM を自分のものにしてください。

本書で解説しているサンプルスクリプトを、本コーナーにて公開しています。下の目次欄の [Sample Script] をクリックしてご覧下さい。

著者
羽田野 太巳
ISBN
978-4-7973-3638-2
本体価格
2,730円(税込)
ページ数
328
発売開始日
より順次
サイズ
B5変型判
出版
ソフトバンククリエイティブ株式会社

「まえがき」より

近年、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 画像ポップアップ

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

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

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

改訂履歴

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>

1.3.1 オブジェクト (P14)

改訂前
calc = new Object;
改訂後
calc = new Object();

2.1.3 ドキュメントツリーの概念 (P39) 図「Firefoxドキュメントツリー」

要素ノード[TITLE] の下に、要素ノード[ドキュメントツリーサンプル]が描かれているが、正しくは要素ノードではなくテキストノード。

2.1.4 ブラウザごとに異なるドキュメントツリー (P41) 図「Internet Explorer 6、7 の場合」

要素ノード[TITLE] の下に、要素ノード[ドキュメントツリーサンプル]が描かれているが、正しくは、これは存在しない。

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プロパティ

改訂後

▼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行で記述します。