DOMレポート00 getElementById

日時: 2006年05月30日 22:31

ドキュメントオブジェクトモデル(以下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でどんなソースかみれる。

きちんとDOMを覚えたいならWeb2.0、リッチクライアントを実現するJavaScriptプログラミングの標準仕様、DOM（Document Object Model）を徹底解説。JavaScriptをDOM準拠でコーディングすることで、Webページを思いのままに操作することができる。Webクリエイターに必須の知識。¥ 2,730

DOMレポート00 getElementById

関連エントリー

カテゴリ