- 2008-09-02 (火)
- 技術
「DOM(Document Object Model)とは、HTML文書およびXML文書のためのAPIである。」
というのがDOMの説明に多いのだが、一体何がDOMで何がDOMではないのかを判断するのがちょっぴり難しい。
JavaScriptをコーディングしていて、「あ～この部分はDOMだな」とか「う～ん、ここはDOMではなくJavaScriptだな」とかを明確に判断する必要はないんだけれど、分かればもっと楽しくなるんじゃないかな。
なのでDOMで遊ぶ際に必要な知識なんかを以下にまとめてみました。
既知の情報も多々ありますが、個人的なメモなのでご了承ください。
DOMとは？
HTML（XML）のようなタグ構造を持つ文書に対して、あたかもオブジェクトのようにアクセスするためのAPIです。 HTMLはタグという文書構造になっているので、例えば「」のようにidにhogeという文字を持つdivタグにアクセスしたいとしたとき、その方法を提供してくれるのがDOMの機能です。 document.getElementById - MDC文書の構造なのにJavaScriptからオブジェクトのようにアクセスできるのはとっても大切で、表示している文字列を書き換えたり背景色を変更したり、アニメーションさせたりといろんなことができてとっても楽しいのです。
そういった便利な関数やプロパティはオブジェクトとして提供されDOMインターフェースというものを通じてボクらはアクセスすることができます。
たとえば以下のようにtableタグを作るためにdocumentオブジェクトが持つcreateElementメソッドを使ったとしましょう。
この場合var宣言で定義されたobjには何が入っているのでしょうか？
JavaScriptでいうところのオブジェクトなのには変わりないのですが、new Object()とした場合と今回のようにcreateElementした場合ではオブジェクトの中身が全然違います。
「HTMLTableElementというDOMインターフェースを実装したtableオブジェクト」というのがobjに入っているオブジェクトの正体ですね。
（なんだか長ったらしいですが・・・ｗ）
createElementでtableオブジェクトを作った場合にはinsertRowというメソッドを持ちますが、new Object()ではそのようなメソッドは持っていません。
これはHTMLTableElementインターフェースを実装しているかそうでないかの違いです。
HTMLTableElement (Common DOM API)
DOMって他の言語でも使えるの？
DOMの機能はPerl・Java・ActiveX・Pythonなどで提供されているようです。
確かにXMLを読み込むような処理の場合にDOMが使えれば簡単にアクセスできますもんね。
PythonのDOMを使った例
# Python DOM example
import xml.dom.minidom as m
doc = m.parse("C:\\Projects\\Py\\chap1.xml");
doc.nodeName # DOM property of document object;
p_list = doc.getElementsByTagName("para");
via: 導入編 - MDC
JavaのDOMを使った例
初めにXMLの読み込み処理がありますが、それ以降はほとんどJavaScriptで使ったものと同じですね。
このようにDOMは他の言語でも提供されているありがた～いオブジェクトなわけです。
これもDOMというものを中立に考えて機能を実装してくれているからなのでしょう。
何がDOMで何がJavaScript？
ここが本題といったところでしょうか。
どこがDOM？みたいに疑問を持つことは普段のコーディングにあんまり影響はしませんが、たとえばwindow.alert()ってDOMなの？そうじゃないの？みたいに少し突っ込んでみると興味が沸いてくると思います。
alert()は引数の文字列が入ったダイアログをポップアップする DOM のメソッドです。
via: The DOM and JavaScript - MDC
とmozillaで解説されているので、これは間違いなくDOMの機能でしょう！
では以下でDOMの場所を特定して解説してみたいと思います。
なおThe DOM and JavaScript - MDCのDOM と JavaScript - 何が何をしているのか?を参考にしています。というかほぼ一緒！
サンプルコードたったこれだけです！ｗ
これだけあれば十分です。
var obj =
ここはobjというJavaScriptの変数を作成しています。
document.getElementsByTagName("div");
Documentインターフェースを実装しているdocumentオブジェクトのgetElementsByTagNameメソッドを使ってHTMLページの順番でdivタグを取得しています。
ここで取得されるオブジェクトはNodeListインターフェースを実装している配列になります。
なのでlengthというプロパティを持ってはいますが、これはJavaScriptの配列のlengthとは違います。
NodeListインターフェースが提供しているlengthとJavaScriptが提供している配列という違いですね。
alert(
DOMの機能を使ってダイアログを表示します。
（今までにこのメソッドを何度使ったことか・・・最近はconsole.logになりつつありますが）
obj.item(0).id);
ここはちょっぴり複雑ですね。
まずobjにはNodeListインターフェースを実装した配列が入っています、そしてその一つ一つにはHTMLDivElementインターフェースを実装したオブジェクトが入っています。
NodeListインターフェースにはitemというメソッドがあり、引数に数値を指定することでdivオブジェクトを取得することができます。
そして取得したdivオブジェクトが持つidというプロパティにアクセスしていますね。
idというプロパティはElementインターフェースが提供しているプロパティです。
ということはHTMLDivElementインターフェースとElementインターフェースを実装しているということになります。
（2個も実装しているなんてなんて贅沢なっ！）
基本的なclassName、id、innerHTML、styleなどは確かにどのHTMLオブジェクトでもアクセスできるので一元的にElementインターフェースで実装しているんですね。
ほほぅ。
element - MDC
たった2行のJavaScriptを見てみましたが、こんなにもいろんな実装がされているなんて！といった感じでしょうか。
先のコードでDOMじゃない部分といえば、変数宣言のvar obj部分と;セミコロンくらいです。
それ以外が全部DOMで提供された機能だったというわけです。
DOM様様ですねｗ
まとめ
なんとなくDOMについてまとめておきたかったので今回の記事を書きましたが、結構ボリューム感がありました。
とはいってもmozillaのサイトに行けば、JavaScriptの仕様はたいてい記載されていますし、今は詳しく書かれた本もたくさん発売されています。
勉強するにはもってこいな時代ですね。
6年くらい前はまだAjaxもそんなに普及されていなくて、そもそもAjaxという言葉はなかったからずうっと「非同期」なんて呼んでいたりしました。
その当時はwindow.alertはDOMの機能だってことは、どこにも書いてなくて先輩とかに聞いて回ったのを覚えています。
なんかものが落ちるjQuery Plugin - JDropper作りましたで作ったオモロ～なプラグインもDOMの機能なしには語れないのです。
DOMを学びやすいJavaScript解説本
オライリー・ジャパン
売り上げランキング: 7060
やっぱりサイ本はかかせないです。
この本は重要なところを太字とかにあんまりしてくれていないので文章を読む感じで学習するのが得意な人に向いているんじゃないでしょうか。
オライリージャパン
売り上げランキング: 4564
この本最近買ったのですが、アツいですｗ
イラストばんばん使いまくりで、クロスワードとかも途中にあって、学習というより遊びながらな印象があります。
インプレスジャパン
売り上げランキング: 125084
かゆいところまで突っ込んで解説されているので、かなりな良本です。
雑誌感覚なので、気軽に読めるのもいいですね。
■関連リンク
・W3C Document Object Model
・Gecko DOM Reference - MDC
・org.w3c.dom (Java 2 Platform SE 5.0)
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1115
- Listed below are links to weblogs that reference
- DOMとJavaScriptについて from HouseTect, JavaScriptな情報をあなたに
