DOM入門に仕様書を推奨する記事。
W3Cの勧告原文や和訳をあたってみれば間違いが無かろうと思いはしたものの、どうにも敷居が高くて挫折した。
適宜覚書: DOMツツキ より
私も挫折
というか、最初は仕様書を読んでも今一ピンときませんでした。使用例が載っていないからです。でも、それなら自分で「使用例」を作ってみれば良いのではないでしょうか。interface Document
なんてのが出てきたら、それを実際に参照してみたり作成してみたりするわけです。更にその「attributes」や「methods」も同様に。
何と言っても「勧告原文」をきちんと読めるようになるのが最良だと私は考えます。辛いかも知れませんが、その辛さを超えれば応用の幅が、他のアプローチによる理解に比べて比較になりません。次々新しい勧告が公開されるわけですから。
あるDOMのインターフェイスを理解しようとする際に私が必ずチェックするポイントは3つあります:
「1. 何を抽象化しているのか」を理解できれば、「attributes」や「methods」が自然に理解できます。言い換えると、何故その「attributes」や「methods」が存在するのかが理解できます。例えばElement
インターフェイスはその名の通りXMLやHTMLの「要素」を抽象化したインターフェイスですが、
Element.setAttribute
は属性を追加するメソッドであり、当然あるべきメソッドであると言えます。ちょっと違和感のあるものもありますけれども。
「2. 他のインターフェイスを継承しているか否か」を知らなければ、使用可能な「attributes」「methods」の全てが分かりません。例えばElement
インターフェイスはNode
インターフェイスを継承しています。Node
インターフェイスは要素、属性などの文書構成要素を一般的に抽象化したもので、cloneNode
という複製用のメソッドがあり、Element
インターフェイスを持ったオブジェクトでもこのメソッドを利用できます。
「3. どうやって作成或いは参照するのか」を知らなければ、そもそもそのインターフェイスを持ったオブジェクトを利用できません。例えばElement
インターフェイスを持ったオブジェクトならば、
Document.createElement
や
Document.createElementNS
メソッドで作成できますし、
NodeList.item(index)
等々で参照できます。仕様書を読む上で分かりにくいと思われるのはそれらの作成、参照方法を調べる方法です。手っ取り早い方法をとるなら「IDL Definition」を片っ端から調べます。
Attr getAttributeNode(in DOMString name);
これはElement
インターフェイスのIDL DefinitionにおけるgetAttributeNode
メソッドについての定義です。メソッド名の前にAttr
とありますが、これはAttr
インターフェイスを持ったオブジェクトを返却するという意味です。
Attr createAttribute(in DOMString name)
raises(DOMException);
これはDocument
インターフェイスのIDL DefinitionにおけるcreateAttribute
メソッドについての定義です。同じくメソッド名の前にAttr
と書かれています。
しかしこの方法では分からないものもあります。例えばHTMLHtmlElement
インターフェイス(DOM Level 1 HTMLに定義されています)。しかしこれはHTML要素を抽象化したインターフェイスであり、Element
インターフェイスを継承していることが分かれば作成、参照方法も自然に理解できる筈です。つまりHTMLという名前を持ったElement
を作成、参照すれば良いのです。
interface HTMLDocument : Document {
attribute DOMString title;
readonly attribute DOMString referrer;
readonly attribute DOMString domain;
readonly attribute DOMString URL;
attribute HTMLElement body;
readonly attribute HTMLCollection images;
readonly attribute HTMLCollection applets;
readonly attribute HTMLCollection links;
readonly attribute HTMLCollection forms;
readonly attribute HTMLCollection anchors;
attribute DOMString cookie;
void open();
void close();
void write(in DOMString text);
void writeln(in DOMString text);
Element getElementById(in DOMString elementId);
NodeList getElementsByName(in DOMString elementName);
};
一行目:
interface HTMLDocument : Document
これはDocument
インターフェイスを継承したHTMLDocument
インターフェイスであることを表し、そのattribute、method群の厳密な定義がカーリブラケット{}内に記述されます。
二行目:
attribute DOMString title;
これはtitleという名前のattribute(JavaScriptではプロパティと呼ばれる)であることを表し、その値がDOMString型(JavaScriptではString型)であることを示しています。
三行目:
readonly attribute DOMString referrer;
これはreffererという名前のattributeであることを表し、readonly、つまり書き込み出来ません。値はDOMString型です。
十三行目:
void open();
これはopenという名前のmethodであることを表し、返り値はvoid、何も返しません。
十五行目:
void write(in DOMString text);
これはwriteという名前のmethodであることを表し、何も返しません。in DOMString text
という部分が引数を定義します。この場合引数はDOMString型で、textで表記されています。このtextが何を意味するかは、writeメソッドの説明を読まなければ分かりません。引数が複数ある場合はカンマで区切られて列挙されます。
十七行目:
Element getElementById(in DOMString elementId);
これはgetElementByIdという名前のmethodであることを表し、Element
インターフェイスを持ったオブジェクトを返すことを表しています。引数はDOMString
型で、elementId
で表されています。このelementIdの意味はgetElementByIdメソッドの説明を読まなければ分かりません。