DOMの階層構造

広告

DOMでは対象となる文書を階層構造として扱います。

例えば次のようなHTMLページの<body>から</body>の間の文書について考えてみます。 

<body>
<h1>タイトル</h1>
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
</ul>
<p>サンプル</p>
</body>

このような文書があった場合、DOMでは次のような階層構造として認識します。

/p2-1

この四角で囲まれた1つ1つがノードと呼ばれます。

ノードは「body」ノードを頂点として階層構造になっています。「body」ノードから見た場合「h1」ノード、「ul」ノード、「p」ノードは子ノードになります。逆に「h1」ノードから見たら「body」ノードは親ノードです。また「ul」ノードにはさらに子ノードとして「li」ノードがあります。

ノードには「p」ノードのように要素を表すものもありますし、「タイトル」のように要素に含まれるテキストを表すノードもあります。

何も書かれていない四角は空白のノードです。同じ階層のノードとノードの間、そして先頭と最後には空白のノードが入っています。

階層構造となっていますので、あるノードを取得した後で、その子ノードを参照したり、親ノードを参照したりと言ったことが可能です。具体的にノードへアクセスする方法を次のページで確認します。

( Written by Tatsuo Ikura )