---
title: "DOMとは？ブラウザがHTMLを扱う木構造の基礎"
description: "JavaScriptからHTMLの要素を書き換えられるのはなぜか、不思議に感じたことはありませんか。ブラウザがHTMLを解析して作る木構造DOMの仕組みを理解すると、動的なページ操作の仕組みが見えてきます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-dom"
markdown: "https://giga-site.com/articles/what-is-dom/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# DOMとは？ブラウザがHTMLを扱う木構造の基礎

Webページを作っていると必ず出てくる「DOM」という言葉。これはブラウザがHTMLを読み込んだあとに、内部で組み立てる「文書の地図」のようなものです。この記事では、DOMがどんな構造で、なぜJavaScriptから画面を操作できるのかを、専門用語をかみ砕いて説明します。

> Source HTML: https://giga-site.com/articles/what-is-dom
> Article index: https://giga-site.com/articles/index.md

## 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で共有できるギガサイト便のようなサービスを使うと、ファイルを送る手間なくブラウザでそのまま挙動を見てもらえます。

## よくある質問

### DOMとHTMLは何が違うのですか？

HTMLは最初に届く設計図（文字列）で、DOMはブラウザがそれを解析して組み立てた操作可能な木構造です。JavaScriptで変更されるのはDOMのほうで、元のHTMLファイルは変わりません。

### DOMはどこで確認できますか？

ブラウザの開発者ツールの「要素（Elements）」タブで現在のDOMツリーを見られます。右クリックの「検証」から開けます。

### ノードとは何ですか？

DOMの木を構成する一つひとつの部品です。タグに対応する要素ノードや、文字に対応するテキストノードなどがあり、親子関係でつながっています。

### DOMを学ぶとどんなことができるようになりますか？

JavaScriptで要素を探したり書き換えたりして、クリックで表示が変わるような動的なページを作れるようになります。フレームワークを理解する土台にもなります。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [DOMとは？HTMLをJavaScriptが操作する仕組みをやさしく解説](https://giga-site.com/articles/dom-term/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "DOMとは？ブラウザがHTMLを扱う木構造の基礎",
  "description": "JavaScriptからHTMLの要素を書き換えられるのはなぜか、不思議に感じたことはありませんか。ブラウザがHTMLを解析して作る木構造DOMの仕組みを理解すると、動的なページ操作の仕組みが見えてきます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-dom",
  "url": "https://giga-site.com/articles/what-is-dom",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "DOMとHTMLは何が違うのですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "HTMLは最初に届く設計図（文字列）で、DOMはブラウザがそれを解析して組み立てた操作可能な木構造です。JavaScriptで変更されるのはDOMのほうで、元のHTMLファイルは変わりません。"
      }
    },
    {
      "@type": "Question",
      "name": "DOMはどこで確認できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ブラウザの開発者ツールの「要素（Elements）」タブで現在のDOMツリーを見られます。右クリックの「検証」から開けます。"
      }
    },
    {
      "@type": "Question",
      "name": "ノードとは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "DOMの木を構成する一つひとつの部品です。タグに対応する要素ノードや、文字に対応するテキストノードなどがあり、親子関係でつながっています。"
      }
    },
    {
      "@type": "Question",
      "name": "DOMを学ぶとどんなことができるようになりますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "JavaScriptで要素を探したり書き換えたりして、クリックで表示が変わるような動的なページを作れるようになります。フレームワークを理解する土台にもなります。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```