ドキュメントオブジェクトモデル(以下 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 を持ったブロックの背景が赤くなる。
こんな感じ