はじめに
Webページを作るときによく出てくる「DOM（ドム）について、この記事では、初心者向けに「DOMとは何か」「DOMツリーとは」「ノードって何？」という基本をやさしく解説します。
DOMとは？
DOM（Document Object Model）とは、HTMLやXMLの文書をJavaScriptなどのプログラムから操作できるようにした仕組みのことです。
簡単に言うと、「Webページの見た目（HTML）をプログラムで自由に動かすための設計図」のようなものです。
ブラウザは、HTMLファイルを読み込んだあと、自動的にその構造を解析し、DOMオブジェクトと呼ばれるデータ構造を作ります。これにより、JavaScriptからHTMLの要素を取得したり、書き換えたりできるのです。
DOMツリーとは？
HTMLの構造は**階層構造（親子関係）**をもっています。たとえば、<html>タグの中に<body>タグがあり、その中に<div>や<p>が入っている、というような構造ですね。
この階層構造を**ツリー構造（木構造）**として表したものが「DOMツリー」です。
例えば、以下のHTMLを見てみましょう。
<html>
<body>
<h1>Hello DOM</h1>
<p>これは段落です。</p>
</body>
</html>
このHTMLは、DOMツリーとして次のように表現されます。
Document
└─ html
└─ body
├─ h1
│ └─ "Hello DOM"
└─ p
└─ "これは段落です。"
それぞれの要素（タグやテキスト）が、**ノード（Node）**として表現されています。
ノードとは？
DOMツリーの各「点」は**ノード（Node）**と呼ばれます。ノードにはいくつかの種類があります：
-
要素ノード（Element Node）：
<h1>や<p>などのHTMLタグ -
テキストノード（Text Node）：タグ内のテキスト（例：
"Hello DOM"） -
属性ノード（Attribute Node）：タグに付いた属性（例：
class="title"）
JavaScriptでは、ノードを使ってHTML要素を取得・操作します。たとえば、次のように書きます。
const heading = document.querySelector('h1');
heading.textContent = 'こんにちはDOM';
このコードは、h1タグを取得して、その中身のテキストを書き換えています。これがDOMを通じた操作です。
まとめ
-
DOMとは、Webページ（HTML）をJavaScriptから操作するための仕組み
-
HTMLの構造はツリー状で、これをDOMツリーと呼ぶ
-
各要素やテキストは「ノード」として表現される
-
JavaScriptからノードを操作することで、動的なWebページが実現できる