JavaScrpt について DOM

DOM   Prev. PageNext Page

DOM(ドキュメントオブジェクト)とは、XMLやHTMLなどのツリー構造を操作するための機能です。Webブラウザ上で動作するJavaScriptは、DOMを使用することでWebブラウザ上のHTMLのすべての要素にアクセスしたり、変更を加えることができます。
ここでは、DOMを使用したCSSの操作や、W3C DOMが提供するイベントモデルなどについてもあわせて説明します。

DOM API

JavaScriptからWebページのコンテンツにはにはDocumentオブジェクトを使用してアクセスします。DocumentオブジェクトからはDOMというAPIを利用してドキュメントにアクセスしたり、変更を加えたりすることができます。
DOMはXMLやHTMLなどの階層構造を持ったドキュメントをツリー状に表現します。XMLやHTMLの要素間の親子関係をそのままツリーとして表現したものです。
DOM APIとは、このツリーにアクセスするたのAPIです。なお、DOMはJavaScript専用のAPIといわけではなく、JavaScript以外の言語でもXMLなどを扱うための機能としてDOM APIが提供されています。

DOM のバージョン

JavaScriptから利用可能なDOMには以下のようにいくつかのレベルがあります。
  • DOM Level 0
  • DOM Level 1
  • DOM Level 2

  • DOM Level 0は、W3CがDOM APIの標準化する以前にWebブラウザに実装されていたものです。これは入力フォームやリンクなど、ドキュメント内の一部の要素にしかアクセスできません。
    DOM Level 1 とDOM Level 2についてはW3Cによって標準化されたもので、ドキュメント内のすべての要素にアクセス可能です。DOM Level 2はDOM Level 1にスタイルシートやイベント処理などを追加したものです。ここでは、特に区別する必要のない場合はまとめて「W3C DOM」と呼ぶことにします。

    DOM Level 0

    DOM Level 0は、以下に示すようなドキュメント内の限定された要素にアクセスできます。
  • 入力フォーム(form要素)およびフォーム内の入力項目(inputなど)
  • 画像(img要素)
  • アンカー(name属性が指定されたa要素)
  • リンク(href属性が指定されたa要素)
  • アプレット(applet要素)

  • W3C DOM

    DOM Level 0ではドキュメント内の限定された要素(フォームやフォーム内入力項目等)にしかアクセスできなのに対して、W3C DOMはHTMLすべての要素にアクセスすることが可能となっています。
    ツリーの各要素を「ノード」と呼びます。ノードはDocumentオブジェクトから階層構造をたどってアクセスできます。
    また、Documentオブジェクトには特定の要素を検索するための便利なメソッドが用意されているため、検索したい要素がid属性などで特定可能な場合はDOMツリーをたどるコードを記述する必要はありません。

    ■DOMとHTML

    W3C DOMは本来XMLをプログラムから扱うための仕様です。したがって、W3C DOMではXML向けの仕様をコアDOM APIとして定義し、HTML向けに拡張されたAPIを別途定義しています。
    ■相互リンク

    サーバー亭
    高級補正下着
    囲碁ソフト開発
    ===============
    ジュンエール