学習のモチベーション
私は普段の業務の中で、どちらかというとサーバーサイド, DBレイヤ寄りの実装を行う事が多く、クライアント周りの知識が乏しいです。
それでも依頼されれば簡易的なJSの実装を行ったりはしますが、いまいちDOMという概念を自分の中で明確に言語化できていないまま、雰囲気でDOM操作をしたりしていました。
さすがに、Webエンジニアを自称する人間としてDOMとは何なのかくらいは自分の言葉で説明できる必要があるなと思い、学習・執筆に至った次第です。
DOMとは何なのか
DOM（Document Object Model）は、Webページの構造をプログラムで操作できるようにしたインターフェースです。
簡単に言うと、「HTMLやXML文書をプログラムで扱うためのオブジェクト」です。
参考文献
DOMの役割
なるほど、ではDOMという概念が存在する事で、我々開発者はどのようなメリットを享受できるんでしょうか。
DOMが存在する事で、以下のようなメリットを享受できます。
-
文書の構造を表現する
DOMはウェブページのHTMLやXMLをツリー構造として表現します。
これによってページは構造化され、各要素（例：見出し、段落、画像など）にアクセスしやすくします。 -
プログラマブルになる
JavaScriptなどのプログラム言語で、HTMLやCSSを変更したり操作したりするために、DOMが使われます。
例えば、ボタンをクリックしたときに、特定のテキストを変更することができます。 -
動的なウェブページを実現する
DOMを通じて、JavaScriptで要素を追加、削除、変更することで、インタラクティブで動的なウェブページが作れます。
DOMの基本構造と構成要素
DOMの基本構造
DOMは、ツリー構造（階層構造）で表現されます。このツリーはノード（Node）という単位で構成されています。
具体例として、HTMLとDOMツリーそれぞれを表現してみます。
<!DOCTYPE html>
<html>
<head>
<title>DOMの例</title>
</head>
<body>
<h1>Hello World！</h1>
<p>これはサンプルのHTMLです。</p>
</body>
</html>
上記のHTMLに対応するDOMツリーは、以下のような構造になります。
Document
├── html
├── head
│ └── title ("DOMの例")
└── body
├── h1 ("Hello World！")
└── p ("これはサンプルのHTMLです。")
では、DOMはどのような要素から構成されるのでしょうか。
DOMの構成要素
DOMは以下の種類のノード（Node）で構成されています。
-
要素ノード（Element Node）
HTMLタグ（例：<html>,<h1>,<p>）を表します。
DOM操作の中心的な存在で、親子関係や属性を持つことができます。 -
テキストノード（Text Node）
要素ノード内に含まれるテキスト（例：「Hello World！」）を表します。親ノードを持ち、テキストデータを保持します。 -
コメントノード（Comment Node）
HTMLのコメント（例：<!-- コメント -->）を表します。ページには表示されませんが、開発者向けの情報として存在します。 -
ドキュメントノード（Document Node）
DOMツリーの最上位にあるノードです。documentオブジェクトとしてアクセスでき、ページ全体を表します。
まとめ
DOMとは、HTMLやXML文書をツリー構造として表現し、プログラムで操作できるようにするモデルです。
DOMが提供される事によって、我々Web開発者はノードにアクセスする事ができ、エンドユーザーに対してインタラクティブなWebページの提供を実現する事ができます。
先述の参考文献は、DOMについて非常にわかりやすくまとめられています。ぜひ一度目を通してみるとよいでしょう。