学習ログ：DOMとHTML/XMLの関係、そしてブラウザとJavaScriptの役割

DOMとは何か

DOM（Document Object Model）は、HTMLやXMLといった文書をプログラムで操作できるようにしたデータ構造である。文書をツリー構造に変換し、要素やテキストをノードとして扱えるようにする。

例：

<p>Hello</p>

はDOM上では「pノードの子にテキストノード”Hello”がある」という形で表現される。

⸻

HTML/XMLとDOMの関係

• HTML/XML：文書のデータそのもの（テキストファイルやソースコード）
• DOM：それをブラウザがパースして生成する内部表現（操作可能なツリー構造）

つまりHTML/XMLが素材、DOMがプログラムから利用可能な調理済みデータ構造にあたる。

⸻

ブラウザとJavaScriptの役割

ブラウザはHTML/XMLをパースしてDOMを生成し、さらにそのDOMを操作するための DOM API を提供する。JavaScriptはそのクライアントとしてAPIを利用し、文書の表示内容や構造を操作する。

図にすると以下のようになる：

[HTML/XMLソース]
       ↓ (パース)
   [DOMツリー in ブラウザ]
       ↑          ↓
  (API提供)   (描画エンジンが表示)
       ↑
   [JavaScriptコードが呼び出し]

⸻

具体例

<p id="msg">Hello</p>
<script>
  const el = document.getElementById("msg");
  el.textContent = "Hi!";
</script>

• JavaScriptはdocument.getElementById というDOM APIを呼び出す
• ブラウザがDOMツリーを書き換える
• 描画エンジンが再レンダリングし、画面に “Hi!” が表示される

⸻

まとめ

• HTML/XMLは入力（文書データ）
• DOMはブラウザが生成した内部モデル
• ブラウザはDOM APIを提供し、JavaScriptはそのAPIを使って文書を間接的に操作する

JavaScriptがDOMを直接触っているように見えて、実際はブラウザのAPIを介して操作している、という点が重要である。