DOMとは？ブラウザがHTMLを扱う木構造の基礎

DOMは「HTMLを木に変えたもの」

DOMはDocument Object Modelの略で、日本語にすると「文書オブジェクトモデル」です。ブラウザはHTMLファイルを文字列として受け取ったあと、その内容を解析して、プログラムから扱える形に組み直します。この組み直された構造がDOMです。

HTMLは見た目こそ文字の羅列ですが、要素同士には親子の関係があります。body の中に section があり、その中に見出しや段落がある、という入れ子構造です。DOMはこの入れ子をそのまま「木（ツリー）」として表現します。

つまりDOMは、HTMLという設計図をブラウザが読み取り、操作可能な部品の集まりに変換した結果だと考えると分かりやすいです。

ノードという考え方

DOMの木を構成する一つひとつの部品を「ノード」と呼びます。要素ノード、テキストノード、属性など、種類はいくつかありますが、まずは「タグがひとつの箱になる」とイメージすれば十分です。

たとえば見出しのタグはひとつの要素ノードになり、その中に書かれた文字はテキストノードとして子の位置にぶら下がります。こうしてページ全体が、根（ルート）から枝分かれする一本の木として表現されます。

実務ではどこで関係する？

DOMとはは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

DOMについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

JavaScriptがDOMを操作できる理由

DOMが「オブジェクトモデル」と呼ばれるのは、各ノードをプログラムから触れるオブジェクトとして扱えるからです。JavaScriptはこのDOMを通じて、要素を探したり、文字を書き換えたり、新しい要素を追加したりできます。

ボタンを押すと文字が変わる、リストに項目が増える、といった動きはすべてDOMの書き換えによって実現されています。HTMLそのものを書き直しているのではなく、ブラウザ内部のDOMを変更し、その結果が画面に反映されているのです。

DOMを確認する手順

実際のDOMは、ブラウザの開発者ツールで簡単にのぞけます。学習中の人ほど、自分で書いたHTMLがどんな木になっているかを目で見ると理解が早まります。

1. ページ上で右クリックして「検証」または「要素を調査」を選ぶ
2. 開発者ツールの「要素（Elements）」タブを開く
3. 表示されたツリーの三角マークを開いて入れ子をたどる
4. 気になる要素をクリックして、対応する画面の位置を確認する
5. Consoleタブで document.title などを実行し、DOMに触れてみる

HTMLとDOMは別物だと知っておく

初心者がつまずきやすいのは、HTMLファイルとDOMを同じものだと思ってしまう点です。HTMLはあくまで最初に届く設計図で、DOMはそれを元に組み立てられた現在の状態です。

JavaScriptで要素を追加すると、元のHTMLファイルは変わらないのにDOMだけが変化します。だから開発者ツールで見える構造と、最初のHTMLソースが食い違うことがあるのです。この違いを押さえておくと、動的なページの仕組みがぐっと理解しやすくなります。

DOMの理解はWeb全体の土台になる

DOMが分かると、その上で動くイベント処理、表示の更新、ライブラリの仕組みまで一気に見通しが良くなります。逆にここがあいまいだと、なぜ画面が変わるのかが感覚的にしか掴めません。

完成したHTMLをチームに見せて確認してもらいたいときは、認証付きの一時URLで共有できるギガサイト便のようなサービスを使うと、ファイルを送る手間なくブラウザでそのまま挙動を見てもらえます。