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

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

タイトル



サンプル





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



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

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

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

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

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


https://www.javadrive.jp/javascript/dom/index3.html