Web標準テキストシリーズWeb標準テキスト(1) DOM Scripting
2008年1月12日紙版発売
古籏一浩 著
A5判/448ページ
定価2,948円(本体2,680円+税10%)
ISBN 978-4-7741-3326-3
ただいま弊社在庫はございません。
書籍の概要
この本の概要
DOM(Document Object Model)Scriptingとは,さまざまなWebブラウザに組み込まれているJavaScriptを実行する仕組みです。DOMはW3C(WWW Consortium)にて標準化が進められています。JavaScriptだけではなく,DOMを使いこなせば,CSS(スタイルシート)やHTMLの挙動も自由に操作できます。Webデザインをする上で,DOMは「縁の下の力持ち」です。DOMを習得すると一流のWebデザイナーになれます。
本書でDOM Scriptingを根底から理解してみませんか!
こんな方におすすめ
- きちんとコードから学習したいWebデザイナー(または一般のブログユーザー)
- 大学・専門学校などでWebデザインを勉強している人
著者の一言
本書はWeb標準技術の1つであるDOM Scriptingについて解説しています。Web標準というと,(X)HTMLとスタイルシートがメインで解説されることがほとんどです。Webページ上の動作を制御するJavaScriptに関しては,標準化から外れたような感じもありますが,ドキュメントを制御するための方法に関しては,古くから標準化されていました。
この標準化されたものがDOM Scriptingです。この方法を使えば,標準仕様に沿って作成されたWebブラウザでは同じ方法(命令)を使ってドキュメントの操作ができます。
JavaScriptはWebブラウザに関する処理を行なうことが可能ですが,その中でもDOM Scriptingはドキュメントの操作に特化したものだと言えます。DOM Scriptingが扱うドキュメントはHTMLだけでなく,XHTML,XMLでも同様の手法で処理ができます。また,DOMは最近できたものではなく10年近く前からあり,今後も通用する技術の1つです。
Webブラウザによって若干動作の違いはありますが,DOM Scriptingを学習することでドキュメント操作を統一(標準化)できるのが大きなメリットになるでしょう。
本書がその一助になれば幸いです。
本書のサンプル
本書の一部ページを,PDFで確認することができます。
- サンプルPDFファイル(480KB)
本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。
目次
第1章 標準であることの意味
- 1.1 なぜ標準でなければならないのか
- ①新しいWebブラウザ/デバイスに対応できる(多様なデバイスへの対応)
- ②一度覚えれば長年使える技術になる(技術/プログラムの再利用)
- ③他のWebサイトのデータも利用できる(データの再利用)
- ④他人と技術が共有できる(教育時間の軽減)
- 1.2 旧式な処理方法の限界
- 1.3 (X)HTML,CSS,JavaScriptを分離することによるメリット
- 分業の意味がなくなる例
- プログラムの複雑化
- 1.4 単独での開発から多人数での開発へ
第2章 実行環境を調べる
- 2.1 どの機能が使えるのか
- ユーザエージェントを調べる
- Webブラウザ独自のオブジェクト/プロパティが存在するか調べる
- document.getElementByIdの有無を調べる
- 2.2 WebブラウザのDOMの実装状態を調べる
第3章 ドキュメントを操作する
- 3.1 ドキュメントツリーとノード
- 3.2 ルートノードからのアクセス
- ノードリスト
- 特定のタグを基準にしてアクセス
- 3.3 タグ内のノードにアクセスする
- 最初と最後のノードにアクセス
- 兄弟のノードにアクセス
- 親ノードにアクセス
- 3.4 ノードの追加/ドキュメントの作成
- タグ(エレメント)ノードの追加
- テキストノードの追加
- コメントノードの追加
- 空のドキュメントの作成
- CDATAセクションの作成
- Processing Instruction(処理命令)の作成
- 実体参照の作成
- 3.5 ノードを追加/削除/移動するインタフェース
- ノードを追加/移動するインタフェース
- ノードを挿入するインタフェース
- 3.6 ノードを削除するインタフェース
- ノードを削除するインタフェース
- 子ノードの数を調べて,全ての子ノードを削除する
- 子ノードを持っているかを調べて,全ての子ノードを削除する
- 末尾から参照して子ノードを削除する
- 自分自身のノードごと削除する
- 削除したノードを復活させる
- 3.7 ノードの置換
- ノードを置換する
- ページ上にあるノードを置換する
- 3.8 ノードの複製
- ノードを複製する
- 同じID名に関する注意
- 3.9 子ノードがあるかどうか調べる
- 子ノードの有無を調べる
- 特定の位置の子ノードの有無を調べる
- 3.10 属性(アトリビュート)の取得と設定
- 属性を取得する
- 属性を設定する
- 3.11 テキストノードの文字列操作
- data:格納されている文字列
- length:格納されている文字列の長さ
- substringData():指定位置から指定数だけ文字列を抜き出す
- appendData():文字列の末尾に文字列を追加する
- insertData():指定された文字列の位置に挿入する
- deleteData():指定された位置から指定した数だけ文字列を削除する
- replaceData():指定された位置から指定された数の文字列を置換
- splitText():テキストノードを分割
第4章 スタイルシートを操作する
- 4.1 スタイルシート値を読み出す
- スタイルシートを扱うインタフェース
- getComputedStyle()メソッドでスタイルを取得する ※Internet Explorer以外
- Internet Explorerの場合
- 4.2 CSSStyleDeclarationインタフェースを利用して値を読み出す
- cssText
- length
- item()
- parentRule
- setProperty
- removeProperty
- getPropertyValue
- getPropertyPriority
- getPropertyCSSValue
- getPropertyCSSValue(primitiveType)※Firefoxのみ
- getPropertyCSSValue(getFloatValue)※Firefox,Safari以降
- getPropertyCSSValue(getRGBColorValue)※Firefox,Safari以降
- getPropertyCSSValue(getRectValue)※Firefoxのみ
- getPropertyCSSValue(getStringValue)※Firefox,Safariのみ
- 4.3 linkタグで指定されたCSSファイル内の属性値を読み出す
- Internet Explorer以外のWebブラウザの場合
- Internet Explorerの場合
- ドキュメント全体のCSSを読み出す
- スタイルの追加
- スタイルの削除
- @importで読み込まれたスタイルシート
- ルールセットの追加
- ルールセットの削除
- 4.4 スタイルシートに値を設定する(style属性)
- 2つ以上の単語が組み合わされたプロパティ名の場合
- 先頭が「-」で始まるスタイルシートプロパティ名の場合
- 複数のプロパティに値を設定する
- スタイルシートの設定を一括で処理する
- styleオブジェクトのプロパティに値を設定する
- 4.5 スタイルシートに値を設定する(class属性)
- スタイルを変更する
- クラスの追加
- クラス名を置換する
- style属性の設定よりクラス定義の設定を優先させる
- 4.6 スタイルシートファイルを後付けで読み込む
- スタイルシートを一括で変更する
- スタイルシートファイルを追加する
- スタイルシートファイルを削除する
第5章 イベントの処理
- 5.1 ブラウザによって異なるイベント処理
- 5.2 イベントの追加
- Internet Explorerにおけるイベント追加
- 5.3 イベントの削除
- Internet Explorerの場合のイベント削除
- 5.4 イベントの伝達方向
- Internet Explorerでのイベント伝達
- 5.5 イベントの伝達を止める
- Internet Explorerの場合
- 5.6 イベントの発生源と発生したイベントの種類
- Internet Explorerの場合
- 5.7 デフォルトアクションの中止
- Internet Explorerの場合
第6章 HTML DOMの処理
- 6.1 HTML DOM
- length:HTMLコレクション(ノード)の総数
- item:HTMLコレクション(ノード)の参照
- namedItem:HTMLコレクション(ノード)内のID/名前の参照
- 6.2 画像の処理
- setAttribute()を使って属性値を変更する
- namedItem()を使ってアクセスする
- 6.3 テーブルの処理
- createCaption:キャプションの追加
- deleteCaption:キャプションの削除
- insertRow,insertCell:行とセルの挿入
- deleteRow:行の削除
- deleteCell:行の削除
- createTHead:テーブルヘッダの作成
- deleteTHead:テーブルヘッダの削除
- createTFoot:テーブルフッターの作成
- deleteTFoot:テーブルフッターの削除
- rowIndex,cellIndex:セル番号
- 6.4 入力フォームの処理
- add:項目の追加
- remove:項目の削除
第7章 XMLデータの操作
- 7.1 HTMLとの違い
- 7.2 XMLデータを読み込み表示処理を行う
- XMLデータをDOMとして操作する①
- XMLデータをDOMとして操作する②
第8章 応用編
- 8.1 HTML,CSS,JavaScriptを分離する
- 後付けでイベントを割り当てる
- thisを使って汎用性を持たせる
- addListener()を使ってイベントを設定する
- 8.2 スタイルシートで直接プロパティ値を操作しないようにする
- 8.3 Prototypeライブラリを使う
- 8.1節のサンプルをPrototype用に書き換える
- 8.2節のサンプルをPrototype用に書き換える
- 8.4 jQueryを使う
- jQueryの特徴
- 豊富なプラグイン(ライブラリ)
- jQueryのダウンロード
- ドキュメントへのアクセス
- 特定のクラスを持つエレメントへのアクセス
- 特定のタグへのアクセス
- 階層構造へのアクセス
付録
- DOMリファレンス
- DOM Level 1
- DOM Level 2 Core
- DOM Level 2 Style Sheet
- DOM Level 2 CSS
- DOM Level 2 Events
- HTML DOM Level 1
- HTML DOM Level 2
- Prototype Ver1.6.0のクラス・メソッド一覧
- DOM Scripting不具合リスト
この本に関連する書籍
-
XOOPS Cubeコミュニティサイト構築ガイド
XOOPS Cubeは人気のWebサイト構築ツールであり,プログラミングの経験がなくても簡単に使いこなせます。本書は開発環境のセットアップ,基本操作,各モジュールの機能と...
-
Web標準テキスト(3) HTML/XHTML
どんなWebブラウザを使っても同じ結果がほしい。インターネットのコモディティ化により,ユーザニーズは多様化しました。普段利用するWebブラウザも,パソコン用だけで...
-
Web標準テキスト(2) CSS
Webページのレイアウトデザインに様式美をもたらすCSS(Cascading Style Sheet)の技術は革命をおこしました。画面を拡大するとレイアウトが乱れたりするWebページと決...
-
ワンランク上を目指す CSSクリエイティブ・デザイン
CSS(スタイルシート)でのWebサイト制作が当然であるという時代になり,Webデザイナーには,デザインとコードのどちらか一方に特化した取り組みだけでなく,双方の学習...