はじめに

Webページを作るときによく出てくる「DOM（ドム）について、この記事では、初心者向けに「DOMとは何か」「DOMツリーとは」「ノードって何？」という基本をやさしく解説します。

DOMとは？

DOM（Document Object Model）とは、HTMLやXMLの文書をJavaScriptなどのプログラムから操作できるようにした仕組みのことです。

簡単に言うと、「Webページの見た目（HTML）をプログラムで自由に動かすための設計図」のようなものです。

ブラウザは、HTMLファイルを読み込んだあと、自動的にその構造を解析し、DOMオブジェクトと呼ばれるデータ構造を作ります。これにより、JavaScriptからHTMLの要素を取得したり、書き換えたりできるのです。

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）**と呼ばれます。ノードにはいくつかの種類があります：

JavaScriptでは、ノードを使ってHTML要素を取得・操作します。たとえば、次のように書きます。

const heading = document.querySelector('h1');
heading.textContent = 'こんにちはDOM';

このコードは、h1タグを取得して、その中身のテキストを書き換えています。これがDOMを通じた操作です。

参照：イラスト図解式この一冊で全部わかるWeb技術の基本