DOM

当ページのリンクには広告が含まれています。

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ページの動的なコンテンツの生成や変更などに利用されます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次