さぁ、始めよう。
目次

DOMとは?

DOMはドキュメントオブジェクトモデル(Document Object Model)の頭文字を取った名前です。

DOMは、HTMLやXMLを解析した結果を、ツリー状のオブジェクトとして表現したものです。

W3Cが標準化を進めています。

DOMのバージョン

標準化以前

W3Cによる標準化以前のDOMを「DOM Level0」と呼びます。DOM Level0は公式に標準化された仕様ではありませんが多くのブラウザでサポートされています。ただし、Form要素等の限定的な要素しか取得できません。

標準化以降

W3Cが標準化を進めているLevel1以降のDOMを「W3C DOM」と呼ぶこともあります。それ以降、Level2,Level3と随時進化しています。

なお、「DOM Level0」と「W3C DOM」は併用可能です。

DOM Level0

W3CがDOM APIの標準化を進める前に実装されたもので、入力フォームやリンク等、ドキュメント内の一部の要素にしかアクセスできません。

Level0でアクセス可能な要素は

  • form要素および、フォーム内の要素(input/textarea/select等)
  • img要素
  • アンカー要素<a name=”>
  • リンク要素<a href=”>
  • アプレット

DOM Level0の階層

document
・forms
input
textarea
select
options
・images
・anchors
・links
・applets

DOM Level0での要素の指定方法

  • forms[idx]
  • forms[‘formname’]
  • formname
  • f.elements[idx]
  • f.elements[‘elementname’]
  • f.elementname

DOM Level1

W3Cによって標準化されたもので、ドキュメント内のすべての要素にアクセス可能です。

W3Cでは要素をノードと呼ばれるオブジェクトで表します。HTML文書では<HTML>ノードを頂点としたツリーが構築されます。

DOM Level1の階層

html
head
title
text?
body
h1
text?
p
text?
a
text?

DOM Level2

DOM Level1にスタイルシートやイベント処理を加えたものです。

DOM API

DOMツリーにアクセスするためのAPIです。getElementByID()等

anchorsとlinksの違い

どちらも<a>タグの要素を指しまが、anchorsはname属性が設定されたもの、linksはhref属性が設定されたものという違いがあります。

コンテンツ

目次
閉じる