DOM（Document Object Model）とは？
DOM（Document Object Model）とは、HTMLやXML文書の構造を、JavaScriptから操作できるオブジェクトとして表した仕組みです。
ブラウザはHTMLを読み込むと、その内容をDOMとして管理します。JavaScriptでは、このDOMを操作することで、ページ内の文字を変更したり、新しい要素を追加したり、クリックなどのイベントに応じて表示を変えたりできます。
つまりDOMは、HTMLとJavaScriptをつなぐための重要な仕組みです。
DOMツリーの基本構造
DOMは、HTML文書をツリー構造として表します。
ツリー構造とは、親要素・子要素・兄弟要素のように、階層関係を持つ構造のことです。HTMLのタグ同士の関係がそのまま木のような形で表されます。
DOMツリーの例
次のHTMLを例に見てみましょう。
<!DOCTYPE html>
<html>
<head>
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>これは段落です。</p>
</body>
</html>このHTMLは、DOMでは次のような構造として扱われます。
document
└── html
├── head
│ └── title
│ └── "ページのタイトル"
└── body
├── h1
│ └── "見出し"
└── p
└── "これは段落です。"このように、HTMLの要素は親子関係を持つツリーとして管理されます。
DOMツリーを構成する主なノード
DOMツリーは、さまざまな種類のノードで構成されます。ノードとは、DOMを構成する部品のことです。
| ノードの種類 | 説明 |
|---|---|
| ドキュメントノード | HTML文書全体を表す。JavaScriptではdocumentとして扱う。 |
| 要素ノード | <div>や<p>などのHTMLタグを表す。 |
| テキストノード | 要素内に書かれた文字列を表す。 |
| コメントノード | <!-- コメント -->のようなHTMLコメントを表す。 |
| 属性ノード | idやclassなどの属性を表す。 |
初心者のうちは、まず要素ノードとテキストノードを理解しておくと十分です。
要素ノードとテキストノードの関係
DOMでは、HTMLタグだけでなく、その中に書かれた文字もノードとして扱われます。
例えば、次のHTMLを見てみましょう。
<h1>こんにちは、世界！</h1>このHTMLは、DOMでは次のように扱われます。
h1（要素ノード）
└── "こんにちは、世界！"（テキストノード）<h1>は要素ノードで、その中の「こんにちは、世界！」はテキストノードです。
JavaScriptでDOMを操作する
JavaScriptを使うと、DOMを通してHTMLの内容を変更できます。
テキストを変更する例
// h1要素を取得
const heading = document.querySelector("h1");
// テキストを変更
heading.textContent = "新しい見出し";このコードでは、querySelector()で<h1>要素を取得し、textContentで表示される文字を変更しています。
document.querySelector("h1")で最初の<h1>要素を取得します。textContentで要素内の文字を変更します。- JavaScriptからHTMLの表示内容を動的に変えられます。
DOM操作でよく使うメソッド
JavaScriptでDOMを操作する際には、次のようなメソッドをよく使います。
| メソッド | 説明 |
|---|---|
getElementById() |
IDを指定して要素を取得する。 |
querySelector() |
CSSセレクタを使って最初に一致する要素を取得する。 |
querySelectorAll() |
CSSセレクタに一致するすべての要素を取得する。 |
createElement() |
新しいHTML要素を作成する。 |
appendChild() |
作成した要素を親要素へ追加する。 |
remove() |
指定した要素を削除する。 |
DOMを操作する簡単な例
次に、新しい要素を作成してページへ追加する例を見てみましょう。
// 新しいp要素を作成
const paragraph = document.createElement("p");
// テキストを設定
paragraph.textContent = "JavaScriptで追加した段落です。";
// bodyの最後に追加
document.body.appendChild(paragraph);このコードを実行すると、JavaScriptによって新しい段落がページへ追加されます。
createElement()で新しい要素を作成します。textContentで文字を設定します。appendChild()でページへ追加します。
DOMを理解するメリット
DOMを理解すると、JavaScriptで次のような操作ができるようになります。
- ボタンをクリックしたら文字を変更する。
- フォームに入力された値を取得する。
- リスト項目を追加・削除する。
- 画像やリンク先を動的に変更する。
- イベントに応じて表示を切り替える。
Webページに動きを付けるためには、DOMの理解が欠かせません。
まとめ
- DOMは、HTML文書をJavaScriptから操作できるオブジェクトとして表した仕組みです。
- ブラウザはHTMLを読み込むと、DOMツリーとして管理します。
- DOMツリーは、親子関係を持つツリー構造です。
- HTMLタグは要素ノード、文字はテキストノードとして扱われます。
- JavaScriptでは、DOMを操作して文字の変更や要素の追加・削除ができます。
querySelector()やcreateElement()などはDOM操作でよく使うメソッドです。- DOMを理解すると、動的でインタラクティブなWebページを作れるようになります。