DOMとは、Document Object Modelの略称で、Webページの要素(HTMLタグ)やテキスト、画像、フォームなどの情報を、JavaScriptなどのプログラムからアクセス・操作するためのインターフェースです。
Webページは、HTML文書として書かれており、ブラウザがHTMLを解釈して、Webページを構築します。このとき、Webページの要素は、ブラウザによって、木構造(ツリー構造)に変換され、DOMツリーとして表現されます。このDOMツリーは、JavaScriptなどのプログラムからアクセス・操作することができます。
例えば、以下のようなHTML文書があるとします。
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a sample page.</p>
<img src="image.jpg" alt="sample image">
</body>
</html>
このHTML文書をブラウザが解釈して、DOMツリーが構築されると、以下のようなDOMツリーができます。
HTML
├── HEAD
│ └── TITLE
│ └── "Sample"
└── BODY
├── H1
│ └── "Hello, World!"
├── P
│ └── "This is a sample page."
└── IMG
├── src="image.jpg"
└── alt="sample image"
このDOMツリーは、JavaScriptから操作することができ、Webページの内容を変更することができます。例えば、以下のようなJavaScriptコードを実行すると、<h1>
要素内のテキストが変更されます。
document.getElementsByTagName("h1")[0].textContent = "Hello, DOM!";
このように、DOMはWebページの要素をプログラムから操作するためのインターフェースであり、Webページの動的なコンテンツの生成や変更などに利用されます。