はじめに
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関連のエラーやワーニングが表示されたときも、このあたりを知っておくと原因の究明が楽になる気がします。
最後まで読んでいただきありがとうございました。