はじめに

JavaScriptでHTMLの要素を書き換える際に使用される「DOM」について簡単にまとめました。
触ったことはあるけど、実際にどんな構造になっているかがわからない...といった方の参考になれば幸いです。

概要

DOMとは
DOMの構造

DOMとは

DOMとは「Document Object Model」の略で、Webページ全体の要素をオブジェクトで表現するものです。
そして、JavaScriptからオブジェクトを操作するための専用のAPIが用意されています。

見たことがある人もいると思いますが、

Document.getElementById('');

上記はDOM APIの一種です。

本来であればHTML要素をJavaScriptから変更することはできませんが、DOM APIを使用することで要素を動的に変更することが可能となります。

DOMは、JavaScriptからHTMLに対する「参照」と「更新」を実現するための仕組みです。

DOMの構造

DOMがどのように構成されているかを紹介するため、下記に焦点を当てていきます。

DOMツリー
- 階層構造
ノード
- HTMLの各要素を表現しているもの
ノードの関係性
空白ノード

DOMツリー

DOMは枝分かれした木のような階層構造となっており、それをDOMツリーと呼びます。

下記のHTMLはその下にあるようなツリー構造で表されます。

<!DOCTYPE html>
<html>
    <head>
      <title>タイトル</title>
    </head>
    <body>
      <h1>見出し</h1>
      <p>段落</p>
    </body>
</html>

document 
  └── html 
       ├── head 
       │    └── title 
       │          └── #text タイトル
       └── body 
            ├── h1 
            │    └── #text 見出し
            └─── p
                 └── #text 段落

などのタグは全てオブジェクトとなり、その下に続く親子関係がツリー構造で表現されます。

元々のHTMLとは特に変わったことはなく、似たものだと思って大丈夫です。

ノード

HTMLの各要素のことを、DOMツリーではノードと呼びます。

以下、ノードの種類です。

ドキュメントノード
- 全体を表現するdocumentオブジェクト
要素ノード
- 要素を表現するオブジェクト（html、div、button等、<>で囲われたもの）
テキストノード
- 要素内のテキストを表現するオブジェクト（<div>テキストだよの「テキストだよ」の部分）
属性ノード
- 要素の属性を表現するオブジェクト（id=""、class=""といった部分）
コメントノード
- コメントを表現するオブジェクト（で記された部分）

下記のHTMLはその下にあるようなDOMツリーで表されます。

<!DOCTYPE html>
<html>
    <head>
      <title>タイトル</title>
    </head>
    <body>
      <h1>見出し</h1>
      <!-- ここから本文 -->
      <p id="text">段落</p>
    </body>
</html>

document 
  └── html
       ├── head
       │    └── title
       │         └── #text タイトル
       └── body
            ├── h1
            │    └── #text 見出し
            ├── #comment ここから本文
            │
            └─── p ─── id
                 └── #text 段落

このように、HTML上の要素は全てノードとして表現されます。

ノードの関係性

HTMLの要素に子孫関係があるように、ノードにも下記のような子孫関係があります。

ルートノード
親ノード
子ノード
子孫ノード
兄弟ノード

document                 // ルートノード
  └── html               // documentの子ノード　headとbodyの親ノード
       ├── head
       │    └── title 
       │         
       └── body 
            ├── h1       // h1とpは兄弟ノードであり、htmlの子孫ノード
            │    
            └── p

空白ノード

なんとなく想像がついていると思いますが、HTMLドキュメント内のスペースや改行はDOMの中では空白ノードと呼ばれます。（空白ノードはテキストノードとして表現される）

下記の２つのHTMLは、ブラウザでは同じように表示されます。

<div><h2>見出し</h2><p>段落</p></div>

<div>
  <h2>見出し</h2>
  <p>段落</p>
</div>

しかし、当然ですがDOMツリーは別々のものとなります。

div 
  ├── h2 
  │   └── #text 見出し
  └── p
      └── #text 段落

div 
  ├── 空白
  ├── h2 
  │   └── #text 見出し
  ├── 空白
  ├── p
  │   └── #text 段落   
  └── 空白

頭に入れておくと、実際にDOMを操作した時に役立つかもしれません。

最後に

jQuery等でDOM操作した時に開発者ツールでよくわからないDOM関連のエラーやワーニングが表示されたときも、このあたりを知っておくと原因の究明が楽になる気がします。

最後まで読んでいただきありがとうございました。

参考記事：【JavaScriptの基本】DOMの仕組みと構造