DOM

Eventが一通り終わったので、DOM(Document Object Model)にはいる。

Ajaxでは、このDOMプログラミング+CSSが基本、これに動きを加えるために、Eventやリスナといったものが存在する。「動き」を具現化するものをイベントハンドラー(Event Handler)と呼ぶ。

したがって、HTMLは以下のような、DIV要素をだらだらと書いて、CSSで整形することになる。

<DIV id="a" class="b">
  …
</DIV>

イベントハンドラーは、このDIV要素を捕まえて、なんらかの挙動を示すのであるが、JavaScriptで標準的に用意されているのが、

var el = ducument.getElementById("a");

というdocumentオブジェクトのgetElementByIdメソッド。


このメソッドは、id属性がaの要素をオブジェクトとして捕まえにいく。上の例では、最初に書いたDIVタグで囲まれた要素が捕らえられる。
要素の捕らえ方のくわしくは、Moziilaの記事「Using the W3C DOM」を参照。

Ajaxライブラリでは、この部分が簡単に記述できたり、他の捕捉方法が定義されたりしている。
属性の操作なども、ドット演算子の連鎖( "method1().method2()"の形式で、method1の結果にmethod2を適用すること)が使えたりする。

ということで、前置きが長くなってしまったが、DOMはAjaxライブラリの肝の部分なので、YUI2.6.0でも概観しておかなくては、ならない。