ドキュメントオブジェクトモデル(以下DOM)とはhtmlやxml文書を、ツリー構造のオブジェクトとして表現した、web標準にも定められたもの。
javascriptの入門書を買うと、たいてい少しばかりこのDOMについて触れてあるが、いったいザクやズゴックと何が違うのかさっぱりわからない。そもそも入門書を買ってこれからjavascriptを始めようというひとには、object指向の概念はなかなか理解し難いんじゃあないだろうか。
まあそれはさておき、Ajaxをつかうには不可欠のこのDOMが、やってみると結構おもしろそうなので、覚えるついでに、ここでまとめていこうと思う。
それで一体DOMを使うと何がが出来るのか?
まず、比較的簡単でかつ愉快なのがcssの操作。これには"document.getElementById"という関数をつかう。このdocument.getElementByIdは引数にhtmlに割り当てたidを渡すと、そのidを持つhtmlをobjectとして操作できるというもの。
たとえばpタグに"pTag"というidを指定してその"pTag"をdocument.getElementByIdで取得し、それを"hensup"という変数に入れる。
この"hensup"はstyleというプロパティを持っていて、さらにstyleの下にはcssの各プロパティが属している。
つまりdocument.getElementbyId("Ptag").style.background = "#f00";
というのを適当な関数に指定してそれ実行すると、"pTag"というidを持ったブロックの背景が赤くなる。
こんな感じ
htmlに直接javascriptを書いてあるのでView Sourceでどんなソースかみれる。