DOM Scripting　ことはじめ

光宗

自己紹介

• photohitoメイン開発者（１人）• 最近は JavaScript++

• Xbox360大好き–ゲーマータグは Kiske3

• ラーメン大好き–ラーメン部つくりませんか？

では本題

DOM Scripting

The term DOM Scripting refers toprogrammatically accessing theDocument Object Model (DOM).

http://en.wikipedia.org/wiki/DOM_scripting

W3Cによる DOMの定義

プログラムとスクリプトによるドキュメントのコンテンツと構造とスタイルへの、動的なアクセスと更新を可能にする、プラットフォームおよび言語的に中立なインターフェース

昔

• IE vs NN• 動的ページが DHTMLと呼ばれていた時代

• HTML+CSS+JSを密に連携• ブラウザによる独自拡張のため差異が大きい

今

• W3C (World Wide Web Consortium)による勧告

• APIであるので JS以外でも実装されてる• 標準化されているのでブラウザ間で同じ実装をすれば動く

Web標準

• 標準化の方向– ECMAScript– DOM– CSS

• Tamarin– AdobeからMozillaに提供された AVM2– ECMAScript4準拠– Firefox4に搭載予定

脱線してきたので話を DOMに戻します

JavaScript

(X)HTMLXML

DOM Scripting

DOMの基本

ツリーオブジェクト

HTML文書をツリー状オブジェクトにマッピング

ノード

ツリーの各要素をノードと呼ぶ。よく使うノードは３種類。<p title="お知らせ ">本日は第７回社内勉強会に集まっていただきあ

りがとうございます</p>

要素ノード

p

お知らせ

本日は第７回社内勉強会に集まっていただきありがとうござ

います。

属性ノード テキストノード

メソッド

オブジェクト上のノードを編集したり、新規に追加したりする• getElementById• getElementsByTagName• getAttribute / setAttribute• createElement• createTextNode• appendChild

以上、基本終わり

3 つの原則

Progressive Enhancement

Graceful Degradation

Unobtrusive JavaScript

Progressive Enhancement

• 段階的強化

•JavaScript

•CSS

•(X)HTML

Structureに付加的な情報レイヤーを適用

Graceful Degradation

表示機能的に劣る（もしくは意図的に JS OFFにしている）ブラウザでも、できるだけそれに合わせた形でアクセシビリティを保つこと

• 例えば–Wii / PS3 / PSP / DS といったゲーム機付属のブラウザ

– docomo / au / SBM /スマートフォンなどの携帯ブラウザ

Unobtrusive JavaScript

HTML(Strucuture)の中に JavaScript(Behavior)を記述しないスタイル

onclick、 onmouseoverとかをマークアップ内に書いていいのは小学生までだよねー

イベントハンドラは HTMLから分離しましょう

３原則の目的

「OFF環境に優しく」

例 1

• JavaScript擬似プロトコル

<a href="javascript:popUp('http://photohito.com');">photohito.com</a>

例２

• インラインイベントハンドラ

<a href="#" onclick="popUp('http://photohito.com'); return false;">photohito.com</a>

例 3

• まぁまぁ良い例

<a href="http://photohito.com" onclick="popUp(this.href); return false;">photohito.com</a>

例 4

• 良い例<a href=http://photohito.com" id="photohito">photohito.com</a>

<script type="text/javascript">window.onload = function() { var anchor = document.getElementById("photohito"); anchor.onclick = function() { popUp("http://photohito.com"); return false; }}</script>

まとめ

• DOM Scriptingについて解説• ３原則–Progressive Enhancement–Graceful Degradation–Unobtrusive JavaScript