Web標準テキストシリーズWeb標準テキスト(1) DOM Scripting

[表紙]Web標準テキスト(1) DOM Scripting

紙版発売

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で確認することができます。

本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。

サンプル画像

目次

第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不具合リスト

著者プロフィール

古籏一浩(ふるはたかずひろ)

この本で28冊目です。今回は3冊同時発売ということで,何となく共著のような感じでしょうか。書いていたら結構厚い本になってしまいました……

URLhttp://www.openspc2.org/

著書