親子・兄弟関係を使ってオブジェクトを参照する

[HTMLの構造]

<html>~</html>の中身は、<head>~</head>というセットと、<body>~</body>というセットがある。
<body>~</body>というセットの中にはさらに<div>~</div>というセットがある。
また、<head>~</head>の中身には<title>~</title>というセットがある。入れ子構造のことを「階層構造」という。

HTMLの構造

[HTMLの場所を取得する]

DOMの中身には参照のための「オブジェクト名」にあたる名前がないため、例えば「html.body.div」のような参照ができない。
そこで「document」というオブジェクトを親として、親子関係、兄弟関係でオブジェクトを参照していく。

ドキュメントツリーの構造
親(Node) 第一子(Node) 第二子(Node) 第三子(Node)
document html headとbody divとscript

「firstChild」というのは、ツリー上にある最初の子どものこと。
子ノードは「childNodes」という配列で管理されており、「firstChild」を「childNodes[0]」と書き換えることができる。

[何を取得するか]

位置を指し示し、この位置に何が書かれているかを取り出すためには、「nodeValue」や「nodeName」などを用いる。

要素ノード( nodeName ) 属性ノード テキストノード( nodeValue )
HTMLタグのこと HTMLタグ内にあるプロパティーのこと( href、src、idなど) タグ以外のテキスト部分

ただし、IE以外のDOMでは、HTML内で使っている「スペース、タブ、改行」が、すべてテキストノード扱いになってしまう。
つまり、改行のたびに、空白のテキストノードができてしまう。このようなテキストノードのことを「ホワイトスペースノード」と呼ぶ。

IE以外のドキュメントツリーの構造

[親子・兄弟関係だけでノードを取得するサンプル]

<html> // firstChild
  <head> // childNodes[ 0 ]
    <title>ドキュメントツリーって?</title>
  </head>
  <body> // childNodes[ 1 ]
         // ホワイトスペースノード(IE以外はchildNodes[ 0 ])
    <div> // firstChild(IE以外はchildNodes[1]  ドキュメントオブジェクトはツリー構造で表せます。// firstChild  nodeValue
    </div>

	<script type="text/JavaScript">
		alert(document.firstChild.childNodes[1].firstChild.firstChild.nodeValue);
	</script>
  </body>
</html>

※IE以外:document.firstChild.childNodes[1].childNodes[1].firstChild.nodeValue);

インデックスに戻る