DOMとは
DOM（Document Object Model）は、HTMLやXML文書をプログラムで操作するためのインターフェースです。 簡単に言えば、「HTMLの要素（例: <h1>タグや<p>タグ）をJavaScriptを通じて操作できるようにする仕組み」です。
HTMLとCSSだけでは、基本的に静的なWebページしか作成できません（例外として、hoverエフェクトなどは可能です）。 しかし、JavaScriptを使用することで、動きのあるインタラクティブなWebページを実現でき、その際にDOMの理解が重要になります。
また、DOMを扱ううえで欠かせない要素として「DOMツリー」という概念があります。 まずは、DOMを使って何ができるのかを簡単に説明した後に、DOMツリーがなぜ必要なのかを具体的に説明します。
DOMで何ができるのか
DOMを使うことで、JavaScriptから以下のようなことができます。
- 要素を取得する
- 内容を変更する
- 要素を追加する
- スタイルを変更する
- イベントに反応する
以下は操作するHTMLのサンプルソースです。
<h1 id="main-title" class="main-title">ページのタイトル</h1>
<p class="text">文章です。</p>
<button class="button">クリックしてみてください</button>DOMを操作することで、JavaScriptからHTMLの構造・内容・スタイル・動作を自由に制御することができます。
Webページに動きを加えたり、インタラクティブな機能を持たせたいときには、DOMの理解が欠かせません。
まずは基本的な取得・変更・追加・イベント処理から少しずつ慣れていきましょう。
要素を取得する
まずは、操作したい要素を「取得」する必要があります。
// IDで要素を取得
const mainTitle = document.getElementById('main-title');
// クラス名で要素を取得
const mainTitle = document.getElementsByClassName('main-title');
// CSSセレクタで要素を取得（最も柔軟な方法）
const mainTitle = document.querySelector('.main-title');内容を変更する
// テキストを変更
const text = document.querySelector('.text');
text.textContent = 'DOMを操作しました！';
// HTMLを変更（HTMLタグも含める場合）
text[0].innerHTML = 'これは<strong>太字</strong>になります';要素を追加する
//<p>タグを作成
const newPar = document.createElement('p');
//<p>タグの文章を作成
newPar.textContent = 'JavaScriptで追加した段落です';
// bodyの最後に追加
document.body.appendChild(newPar);スタイルを変更する
const button = document.querySelector('.button');
button.style.backgroundColor = 'blue';
button.style.color = 'white';イベントに反応する
const button = document.querySelector('.button');
button.addEventListener('click', function() {
alert('ボタンがクリックされました！');
});DOMツリーとは
DOMツリーとは、HTMLの要素が互いにどのような関係にあるかを表した「木」のような構造のことです。
皆さんは家系図や会社の組織図を見たことがありますか？それと同じように、HTML要素同士の「親子関係」や「兄弟関係」を表したものがDOMツリーです。
例えば、次のような簡単なHTMLがあるとします。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのDOM</title>
</head>
<body>
<h1>こんにちは！</h1>
<div>
<p>DOMを学んでいます</p>
<p>楽しいですね</p>
</div>
</body>
</html>このHTMLをDOMツリーで表すと、このようになります：
document
└── html
├── head
│ └── title
│ └── "はじめてのDOM"（テキスト）
└── body
├── h1
│ └── "こんにちは！"（テキスト）
└── div
├── p
│ └── "DOMを学んでいます"（テキスト）
└── p
└── "楽しいですね"（テキスト）この図を見ると、以下のような関係がわかります。
- htmlはdocumentの子要素
- headとbodyはhtmlの子要素で、互いに兄弟関係
- h1とdivはbodyの子要素で、互いに兄弟関係
- 2つのpタグはdivの子要素で、互いに兄弟関係
なぜDOMツリーが重要なの？
DOMツリーを理解すると、JavaScriptで要素を取得・操作するときに、どのように「移動」すればよいかがわかります。
例えば
// 親要素を取得する場合
const div要素 = document.querySelector('div');
const body要素 = div要素.parentNode; // divの親（body）を取得
// 子要素を取得
const div要素 = document.querySelector('div');
const 最初のp要素 = div要素.firstChild; // divの最初の子を取得
const すべての子要素 = div要素.children; // divのすべての子を取得
// 兄弟要素を取得
const h1要素 = document.querySelector('h1');
const div要素 = h1要素.nextElementSibling; // h1の次の兄弟（div）を取得このように、要素間の「移動」ができるため、特定の要素から関連する要素を簡単に見つけられるのです。
DOMツリーをイメージするコツ
DOMツリーを理解するには、HTMLを「入れ子構造」で考えるとわかりやすいです。
- 一番外側の<html>タグが大きな箱
- その中に<head>と<body>という箱がある
- <body>の中に<h1>と<div>という箱がある
- <div>の中に2つの<p>という箱がある
この入れ子構造がそのままDOMツリーの親子関係になります。入れ子の同じ階層にある要素同士が「兄弟」です。
まとめ
DOMはウェブページをプログラムから操作するための重要な概念です。HTMLが「ページの構造」を定義するのに対し、DOMは「その構造へのアクセス方法」を提供します。
まずシンプルなHTMLを用意して、JavaScriptからいろいろな要素を操作する練習をすることです。
要素の取得、テキストの変更、スタイルの適用など、基本操作をマスターすれば、次第に複雑なウェブアプリケーションも作れるようになります。
DOMは最初は複雑に感じるかもしれませんが、少しずつ実践しながら理解を深めていきましょう。
無料のプログラミングスクール「テクドリ」の卒業生のインタビュー動画を、インスタグラムほか公式SNSにて公開中！
