カテゴリ:DOM :: webデザイナーの為のブログ

昔からjavascriptは存在していましたが、htmlに直接記述してソースが煩雑になったり、activeXのセキュリティ上の問題などが原因で使用を控えていた時期がありますが、web標準が注目されはじめ、同時にjavascriptも再び注目を集め始めてきました。ajaxを利用したアプリケーションも公開されてきました。googleマップが良い例ですね。

というわけで、web標準に適したjavascriptの書き方を説明しているサイトを紹介。
一撃必殺JavaScript日本語リファレンス

ここまで充実かつWEB標準に準拠した日本語javascriptリファレンスサイトは類を見ないくらいなのでオススメです。DOMやAjaxライブラリのリファレンスなども充実しています。

DOMが実装されている言語にはいくつか種類があるが、actionscript 2.0、javascript、php4、php5のattributesプロパティの違いを説明。

まず、php4（php4のDOMは中途半端な仕様の為、基本的に全てが標準から外れているがそのへんは今回はノータッチ）。
php4のattributesプロパティは他の言語とは異なり、単純配列を返す。つまり以下のような記述が必要となる。

   $attr = $root->attributes(); /* php4ではプロパティも「（）」を付ける */
   $out = $attr[0]->value; /* 0番目に対応する属性値をoutへ代入 */
   echo $out;

続いて、javascriptとphp5。
javascriptとphp5のattributesプロパティの仕様は基本的に同じはず。getNamedItemメソッドを使用する。

   $attr = $root->attributes();  /* 構文は各言語に合わせて */
   $out = $attr->getNamedItem("class")->value; /* class属性の値をoutへ代入 */
   echo $out;

Flash actionscriptのattributesプロパティは構造体を返す。

   var attr = root.attributes();
   var out = attr.class.value; /* class属性の値をoutへ代入 */
   trace(out);

テストしてないので記述ミスとかあるかもしれませんが、だいたいこんな感じ。初心者にはFlash actionscriptのDOMがオススメですかね。機能もシンプルだし、Flash自体もライトユーザーが多いわけだし。

all aboutの記事でwindow.onloadを待たずにDOM処理を開始するというものがあったのですが、なるほどなと。

まず、DOMとはなんぞや？

DOM

DOMとは、Document Object Modelの省略表記で、プログラムやスクリプトが文書の内容や構造、見栄えに対してアクセスできるようにするためのインターフェースのことです。

つまり、javascriptやPHPなどのプログラムを使い、XHTML(XML)の各要素にアクセスし、テキストの内容を変更したり、属性値を変更したりなど何かと便利な仕組みのことです。

通常、javascriptでDOMを操作するにはページが全て読み込まれてからでないと無理（DOMはノード（各要素やテキスト）を扱うので、それが無ければ当然操作ができない。）なのですが、上記サイトの例ではbody要素をjavascriptで無理やり書き出してノードを追加して色々やってるみたいです。色々と副作用もありそうな感じですが、覚えておいて損はない感じ。（特に、アフィリエイトとかやっている人は読み込み待ちが長いと思うので実用的かも。）

javascriptとDOMを使いたいならこの本がオススメ！DOMの一覧や各種オブジェクトが綺麗に整理されて書かれているので大変読みやすいです。javascriptのリファレンスの中では一番の出来かと。
JavaScriptビジュアル・リファレンス

また同シリーズでactionscriptリファレンスも出ています。こちらも、かなり実用的。一通りイベントハンドラメソッドやリスナー、各クラス（MX2004以下）などが網羅されているので持っておくと便利。冒頭にオブジェクト指向プログラミングの基礎知識的なもの載っているので、そこまで詳しくない人でも入りやすいかも。
ActionScriptビジュアル・リファレンス