【JavaScript入門】DOM（Document Object Model）

　JavaScriptを使ってWebページに動的な振る舞いを与える際には、ページの構造を理解し、要素を操作できる仕組みが欠かせません。この仕組みを支えているのがDOM（Document Object Model）です。DOMによって、HTMLで記述された文書構造はツリー状に表現され、JavaScriptから柔軟に要素を取得・変更・削除などの操作が可能となります。ここでは、DOMの概要と、HTMLがどのようにツリー構造として解釈されるかを解説し、簡単な例を通じてイメージをつかんでいただきます。

１．DOMとは

　DOMは「Document Object Model」の略称で、Webページの文書構造をオブジェクトとしてツリー状に扱うためのモデルです。HTMLファイルに書かれた要素（<html>, <head>, <body> など）は、それぞれJavaScriptのプログラムから参照・操作することができます。たとえば、ある見出し要素のテキストを変更したり、新しい段落を追加したりといった処理を、DOMを介して実現します。

２．サンプルHTMLファイル

　以下に示すのは、ファイル名を「sample_dom.html」としたサンプルHTMLです。文書構造を簡単に示すため、見出しと本文、そしてフッターを含んだ最小限の内容としています。

sample_dom1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>サンプルページ</title>
  </head>
  <body>
    <header>
      <h1>見出し</h1>
    </header>
    <section>
      <article>
        <p>ここに内容が入ります。</p>
      </article>
    </section>
    <footer>
      (C) サンプルページ
    </footer>
  </body>
</html>

　このファイルでは、<header>要素に見出し、<section>と<article>要素で本文を区切り、最後に<footer>要素でフッターを配置しています。実際の開発では、これに加えてナビゲーションバーやサイドバーなど、さまざまな要素が加わる場合があります。

３．HTMLのツリー構造

　ブラウザはHTMLファイルを読み込み、要素をツリー状に解釈します。上記のサンプルHTMLをツリー構造にすると、概ね次のようになります（インデントで階層を示しています）。

html
├── head
│   ├── meta
│   └── title
├── body
│   ├── header
│   │   └── h1
│   │       └── Text: 見出し
│   ├── section
│   │   └── article
│   │       └── p
│   │           └── Text: ここに内容が入ります。
│   └── footer
│       └── Text: (C) サンプルページ

　それぞれのHTMLタグは「ノード」と呼ばれ、Text: ...のように、テキスト部分も個別のノードとして扱われます。JavaScriptでDOM操作を行うときは、このツリー構造の中から対象ノードを取得し、プロパティを変更するなどの処理を行います。

４．DOM APIを利用した操作の例

　JavaScriptのプログラムでは、DOM APIと呼ばれる命令群を通して、HTML要素を取得・変更・追加・削除などの操作を行います。以下は、ファイル名を「sample_dom2.html」とし、見出しを動的に書き換えるサンプルプログラムです。

sample_dom2.html

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>サンプルページ</title>
</head>

<body>
  <header>
    <h1>見出し</h1>
  </header>
  <section>
    <article>
      <p>ここに内容が入ります。</p>
    </article>
    <script>
      // このプログラムは、HTMLドキュメントが読み込まれた後、見出しのテキストを変更します。

      document.addEventListener('DOMContentLoaded', function () {
        // h1要素を取得
        const heading = document.querySelector('h1');
        // テキストを「ようこそ、DOMへ！」に変更
        heading.textContent = 'ようこそ、DOMへ！';
      });
    </script>

  </section>
  <footer>
    (C) サンプルページ
  </footer>
</body>

</html>

解説

document.addEventListener('DOMContentLoaded', ...) は、HTMLの読み込みが完了してから処理を実行するためのイベントです。
document.querySelector('h1') は、ページ内の<h1>要素を取得しています。
heading.textContent = 'ようこそ、DOMへ！'; の部分で、見出しのテキストを変更しています。

　このように、DOM APIを使うことで、ページ内の任意の要素にアクセスし、動的に内容を変化させることが可能です。

まとめ

　DOMは、HTMLで定義された要素をツリー構造として表し、JavaScriptからアクセス・操作できるようにした仕組みです。ページの文書構造をしっかり理解しておくと、要素の取得や変更、追加・削除がスムーズに行えるようになります。
　今後は、DOM APIの具体的な使い方やイベント処理などを組み合わせて、より複雑なインタラクションを実装していきましょう。