読者です 読者をやめる 読者になる 読者になる

南極の図書館

ペンギンが寝ていた…。

初めてのJavaScript第二版 11章 ドキュメントオブジェクトモデル

P219~243まで。2時間程かけてなんとか理解したのでまとめてみる。

DOMとは

1998-DOMレベル1
2000-DOMレベル2
2004-DOMレベル3(多くのブラウザがサポートしていない)
DOM = core API + HTML API

HTML APIとは

クラスではなくインターフェースの集合である。
(インターフェースとはコンストラクタを持たず、オブジェクトはほかの関数を利用して生成される)
ほとんどはElement,Node,HTMLElementから継承。プロパティid,title,lang,dir,classNameなどを保持し読み書き可。

例:insertRow 引数を(-1)とすると最後に追加する。(新しい行は引数で指定した既存行の直前に挿入)

 var tbl = document.getElementById('table1');
 var row1 = tbl.insertRow(-1);

ページ要素のDOM HTMLによる表現にアクセスする方法はいくつかある。
・getElementByIdメソッド
・要素同士の関係を利用。→document.forms[0].elements[0];
・getElementByNameメソッド
これ以外にもある。
このうちgetElementByNameメソッドは、指定したnodeの集まりで構成されたNodeListを返す。
ただし、NodeListはどのブラウザも同じものというわけではない。
ブラウザの非互換性問題を防ぐひとつの方法はDOMHTMLインタフェースを使わないこと。XHTMLを使ってCoreAPIを使う。

CoreAPI

ブラウザごとに実装されたBOMを統一するために作成され、最近は広く利用されている。
DOMのW3C仕様では、ドキュメントの要素を木構造として記述している。

ドキュメントツリーの全てのノードはNodeオブジェクトの基本プロパティ、メソッドを備えている。
document.getElement(ById or ByTagName)メソッドはNodeListを返す。

 筆者はほとんどの場合にgetElementByTagNameを用いて、divタグ内で動的にアクセスできるすべてのコンテンツをカプセル化し、ページがロードされた後、これらのすべての要素をカスタマイズされたオブジェクトのライブラリにロードするなどのDHTML関連の操作を行っています。

ドキュメント内のすべての要素オブジェクトは、Elementから機能とプロパティの基本セットを継承している。(get,set,remove,hasAttributeなど)
プロパティはクラスのインスタンスというより、オブジェクトクラスのコンポーネント。
そのため、Element,NodeオブジェクトやHTMLElementというHTML要素に関連付けられる。
ある要素の属性を操作したいのにプロパティとしてアクセスできない場合は、Elementメソッドを使う。


documentは全てのページ要素の親で、オーナーである。

 documentオブジェクト:新しい要素のインスタンスを生成するために利用するファクトリメソッドの殆どがコレに属する。
 Nodeオブジェクト:Core APIの木構造の整合性を保つ役割を担当する。親子、兄弟関係をたどって特定のノードに到達できる。
 Elementオブジェクト:入れ子要素の限られた範囲を変更するため、コンテキストを制限する方法を提供する。

要素の操作は、createして木構造に追加したり、既にあるものを削除、入れ替えたりする。
例題では以下の3つの使い方を紹介。
aaa.removeChild(bbb);
ccc.replaceChild(eee, ddd);
document.body.appendChild(fff);

終わりに

例題が分かりやすい。この本じゃないともっと時間がかかったと思う。
core APIの各オブジェクト、メソッド、プロパティはじっくり勉強する。
次に読むJavaScript第5版が楽しみになってきた。