Web Programming

A system that organizes HTML like a tree and allows JavaScript to manipulate it.

DOMとは

Webページを作るとき、まずはHTMLを使って文章や画像、リンクなどの情報を記述します。しかし、ブラウザはこのHTMLをそのままの形で扱うことはできません。そこで登場するのが DOM（ドキュメント・オブジェクト・モデル） という仕組みです。

DOMとは、HTMLやXMLで記述された文書を、ブラウザが理解・操作しやすい形に変換した「構造化された木のようなデータ」のことです。この木構造は「DOMツリー」とも呼ばれ、文書の中のすべての要素（たとえば <p> や <img> など）が「ノード（節）」として整理されて並んでいます。

このツリー構造のおかげで、JavaScriptなどのプログラミング言語から、ページ上の特定の要素を簡単に見つけて取り出したり、文章や画像の内容を変更したり、新しい要素を追加したり、不要なものを削除したりすることが可能になります。また、ボタンのクリックや入力フォームへの入力といった「ユーザーの操作」にも反応させることができます。

つまり、DOMは、HTMLやXML文書を「プログラムで動的に操作するためのインターフェース」であり、開発者がページの構造や内容を柔軟に扱えるようにするための仕組みなのです。

このように、DOMはWebブラウザが文書を内部的に表現するための標準化された方法であり、モダンなWeb開発には欠かせない基礎技術のひとつです。

たとえば…

<p>Hello</p>

というHTMLがあったとすると、DOMではこの<p>要素が「ノード」として表現され、その中の「Hello」も別のノードとして扱われます。

JavaScriptではこのように操作できます：

document.querySelector('p').textContent = 'こんにちは';

これにより、ページの表示が「Hello」から「こんにちは」に変わります。