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 )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。