【JavaScript】DOMとは？HTMLとJavaScriptをつなぐ仕組み

javascript-icon JavaScript
2022.06.04

こんにちは、かつコーチです。

前回までは、変数・条件分岐・繰り返し・関数・配列・モジュールといった、JavaScriptそのものの文法を扱ってきました。

ここからは少し毛色が変わります。

今回からは、JavaScriptを使って実際に「画面を動かす」ためのDOM操作編に入っていきます。

言語文法編では、コンソールに結果を出力して確認することが多かったと思います。

しかしDOM操作編では、HTMLと組み合わせて「ボタンを押すと文字が変わる」「クリックすると要素が増える」といった、目に見える変化を作っていきます。

その第一歩として、今回は「DOM」という仕組みそのものを理解しておきましょう。

DOMとは？

DOMの正式名称と役割

DOM（Document Object Model）とは、HTMLの内容をJavaScriptから操作できるように、ブラウザが作り出すデータの模型のことです。

ブラウザは、HTMLファイルを読み込むと、そのまま画面に表示するのではなく、いったんDOMという「木構造（ツリー構造）」のデータに変換します。

JavaScriptは、このHTML自体を直接書き換えているのではなく、ブラウザが作ったDOMというデータを操作しています。

そしてDOMが書き換わると、その変化がブラウザの画面にリアルタイムで反映される、という仕組みになっています。

私が最初にDOMという言葉を聞いたとき、「HTMLを直接いじっているんじゃないの？」と誤解していました。

実際には「HTMLの写し」を操作しているというイメージの方が正確です。

なぜHTMLをそのまま操作しないのか

もしJavaScriptがHTMLの文字列そのものを毎回書き換える仕組みだったら、書き換えるたびにファイル全体を読み直す必要があり、非常に非効率です。

DOMというデータ構造をメモリ上に持っておくことで、JavaScriptは「どの部分だけを」「どう変えるか」をピンポイントで指定できます。

この仕組みのおかげで、ページ全体を再読み込みせずに、一部分だけを高速に書き換えることができるわけです。

DOMはどんな構造をしているのか

木構造（ツリー構造）のイメージ

DOMは、HTMLのタグの親子関係をそのまま「木構造」として表現しています。

たとえば、次のようなシンプルなHTMLを考えてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>サンプルページ</title>
</head>
<body>
  <h1>かつコーチのブログ</h1>
  <p>DOMを学んでいます。</p>
</body>
</html>

このHTMLは、DOM上では次のような親子関係のツリーとして扱われます。

document
└── html
    ├── head
    │    └── title
    └── body
         ├── h1
         └── p

一番上に document という「ページ全体」を表すオブジェクトがあり、その下に html、さらにその下に head と body が枝分かれしていく、というイメージです。

ノード（node）という考え方

DOMのツリーを構成する一つひとつの要素（タグ・テキスト・属性など）のことを、ノード（node）と呼びます。

<h1> タグ自体もノードですし、その中に入っている「かつコーチのブログ」という文字列も、別のノード（テキストノード）として扱われます。

この後の記事で紹介する querySelector や getElementById は、すべて「このツリーの中から目的のノードを探し出す」ための命令だと考えると理解しやすくなります。

document オブジェクトから操作が始まる

document はページ全体の入り口

JavaScriptからDOMを操作するときは、必ず document というオブジェクトを起点にします。

document は、先ほどのツリー図の一番上にあった「ページ全体」を表すオブジェクトです。

コンソールで実際に確認してみましょう。

console.log(document);
// ブラウザが読み込んだHTML全体のDOMツリーが出力される

console.log(document.title);
// "サンプルページ" のように、<title>タグの中身が出力される

console.log(document.body);
// <body>タグ以下のDOMツリーが出力される

document.title や document.body のように、document に対してプロパティやメソッドを呼び出すことで、DOMツリーの中の情報にアクセスしたり、書き換えたりできるようになります。

開発者ツールでDOMを覗いてみる

DOMのイメージをつかむ一番の近道は、実際にブラウザの開発者ツールで確認してみることです。

Chromeであれば、ページ上で右クリックして「検証」を選ぶと、「Elements」パネルにそのページのDOMツリーが表示されます。

ここで要素を選択すると、右側の「Styles」パネルに、その要素に適用されているスタイルも同時に確認できます。

私は学習を始めたばかりの頃、HTMLファイルのソースコードと、この「Elements」パネルの表示が違うことに戸惑ったことがあります。

たとえば、JavaScriptで動的に要素を追加した場合、その要素はHTMLファイルの中には書かれていませんが、「Elements」パネルにはしっかり表示されます。

これはまさに、「JavaScriptがHTMLファイルではなくDOMを書き換えている」ことの証拠です。

❌ Before：HTMLファイルの中身だけを見て混乱するパターン

<!-- HTMLファイルの中身をそのまま見ても、JSで追加した要素は存在しない -->
<body>
  <h1>かつコーチのブログ</h1>
</body>

✅ After：開発者ツールのElementsパネルで「今のDOM」を確認する

// JavaScriptで<p>要素を追加すると
const p = document.createElement("p");
p.textContent = "JavaScriptで追加した要素です";
document.body.appendChild(p);

// HTMLファイルには一切書かれていないが
// 開発者ツールのElementsパネルには <p>JavaScriptで追加した要素です</p> が表示される

HTMLファイルのソースコードは「最初の設計図」にすぎず、実際に画面に表示されている状態を確認したいときは、必ず開発者ツールでDOMそのものを見る癖をつけましょう。

DOM操作の基本的な流れ

3つのステップで考える

これから紹介していくDOM操作は、基本的に次の3ステップの組み合わせでできています。

  • 要素を取得する：document.querySelector などで、操作したい要素をDOMツリーの中から探す
  • 要素を操作する：取得した要素のテキストやクラス、スタイルなどを書き換える
  • 画面に反映される：DOMが書き換わると、ブラウザが自動的に画面を再描画する

この3ステップのうち、3つ目の「画面への反映」はブラウザが自動でやってくれるので、私たちが実際にコードで書くのは1つ目と2つ目だけです。

次回以降の記事では、この「要素を取得する」方法から順番に詳しく解説していきます。

まとめ

この記事のポイント

  • DOMとは、ブラウザがHTMLをもとに作り出す、JavaScriptから操作できるツリー構造のデータ
  • JavaScriptはHTMLファイルそのものではなく、DOMというデータを書き換えている
  • DOMツリーの一つひとつの要素をノードと呼び、document がその起点になる
  • 開発者ツールの「Elements」パネルで、今の実際のDOM状態を確認できる
  • DOM操作は「要素を取得する」→「要素を操作する」の2ステップが基本

次に読むべき記事

DOMの仕組みが分かったところで、次回は実際に「目的の要素をどうやって探し出すか」を解説します。

→ 次の記事：querySelectorで要素を取得する方法

タイトルとURLをコピーしました