目次
DOM（Document Object Model）とは？
DOM（Document Object Model）は、HTMLやXML文書の構造をオブジェクトとして表現する仕組みです。JavaScriptでは、このDOMを操作することで、動的にウェブページの内容や構造を変更したり、イベントに応じた動作を実行することができます。
DOMツリーの基本構造
DOMは、文書全体をツリー構造で表します。このツリーは、HTMLドキュメントの各要素（タグ）をノードとして扱い、親子関係や兄弟関係を持つことができます。DOMツリーは、ページの全体的な構造を視覚的に表現するため、各要素の階層や関連性を理解しやすくします。
DOMツリーの例
以下のシンプルなHTML文書を例に、DOMツリーの構造を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>これは段落です。</p>
</body>
</html>
このHTMLコードを基にしたDOMツリーは、以下のように表現されます。
| ノード | 説明 |
|---|---|
html |
ルート要素（ドキュメント全体） |
head |
htmlの子要素、メタデータを含む |
body |
htmlの子要素、ページの内容を含む |
title |
headの子要素、ページのタイトルを表す |
h1 |
bodyの子要素、見出しを表す |
p |
bodyの子要素、段落を表す |
DOMツリーのノードの種類
DOMツリーは、以下のような種類のノードで構成されます。
| ノードの種類 | 説明 |
|---|---|
| 要素ノード | HTML要素（例: <div>や<p>） |
| テキストノード | 要素内のテキスト |
| 属性ノード | 要素の属性（例: id="header"） |
| コメントノード | HTMLコメント（例: <!-- これはコメント -->） |
要素ノードとテキストノードの関係
DOMツリーでは、要素ノードとテキストノードが階層構造を作ります。以下のコードを基に、要素ノードとテキストノードの関係を見てみましょう。
<h1>こんにちは、世界！</h1>このHTMLは、次のようなDOMツリーを作成します。
- <h1> – 要素ノード
- こんにちは、世界！ – テキストノード
DOMツリーを操作するためのメソッド
JavaScriptを使用してDOMツリーを操作する際には、様々なメソッドを活用します。以下は、代表的なDOM操作のメソッドです。
| メソッド | 説明 |
|---|---|
getElementById |
IDで特定の要素を取得する |
querySelector |
CSSセレクタを使って要素を取得する |
createElement |
新しい要素を作成する |
appendChild |
要素を親ノードに追加する |
removeChild |
親ノードから要素を削除する |
まとめ
DOMツリーは、HTMLやXML文書をオブジェクトとして扱うための重要な仕組みです。要素ノードやテキストノードなど、各ノードは階層的に構成され、これにより文書全体の構造を表現します。JavaScriptを使ってDOMツリーを操作することで、動的なウェブページの作成やリアルタイムのインタラクションを実現できます。DOMツリーの基本構造と操作方法を理解することは、Web開発において非常に重要です。