DOMとは

DOMとは？

HTMLやXML文書をプログラムで扱いやすくするための構造（モデル）です。
Webブラウザは、HTMLを読み込むときにこのDOMを内部的に作成し、
JavaScriptからこの構造を操作できるようにしています。
たとえば、ページ内の見出しや段落、画像など、
すべての要素が「ノード」として階層的に管理されているイメージです。

正式名称

Document Object Model（ドキュメント・オブジェクト・モデル）

略称

DOM（ドム）

特徴

  • HTMLやXML文書をツリー構造として表現する
  • JavaScriptからHTML要素を動的に操作できる
  • ブラウザが HTML を読み込むと自動的に DOM が生成される
  • 要素の選択、変更、追加、削除などの操作が可能

具体例

<html>
  <body>
    <h1>タイトル</h1>
    <p>こんにちは！</p>
  </body>
</html>

このHTMLは、ブラウザ内部で以下のようなDOMツリーとして扱われます

  • <html>
    • <body>
      • <h1> → 「タイトル」
      • <p> → 「こんにちは！」

このように、HTMLタグが親子関係のノードとして階層的に表現されているのがDOMの特徴です。

DOMの操作についてはこちら

DOM操作とは
DOM操作とは？DOM操作とは、Webページの構造をJavaScriptなどのプログラムで動的に変更することを指します。HTMLは本来「静的」な構造ですが、JavaScriptを使ってテキストの変更・画像の差し替え・要素の追加や削除など、リ...
tstyle-take.com
2025.04.25

関連用語

用語解説
ノードDOMを構成する1つ1つの要素（タグ・テキストなど）。
DOMツリーDOMの全体構造。親子関係で構成される階層的なツリー型。
DOM操作JavaScriptでDOMのノードを取得・変更・追加・削除すること。
仮想DOM主にReactなどで使われる、DOMの軽量な仮想コピー。

まとめ

  • DOMとは、HTMLをブラウザがツリー構造で管理する仕組み
  • 各要素は「ノード」として階層的に管理されている
  • JavaScriptを使えば、このDOMを操作できる
  • フロントエンド開発において必ず登場する基本用語

スポンサーリンク
タイトルとURLをコピーしました