ドキュメントオブジェクトモデル（DOM）とは？

JavaScript
2024.05.30

Document Object Model（DOM）は、HTMLやXMLドキュメントの構造を表すオブジェクトモデルで、ウェブページをプログラムで操作できるようにする仕組みです。DOMは、ドキュメントの内容、構造、およびスタイルを表現するためのAPIを提供し、JavaScriptなどのプログラミング言語からアクセスできます。これにより、動的なコンテンツの生成や、ユーザーインターフェースの変更が可能となります。

DOMの構成

DOMは、ドキュメントをツリー構造で表現し、各ノード（要素）には親、子、兄弟ノードが存在します。主要なノードタイプには以下が含まれます：

  • Document：ルートノード。HTMLドキュメント全体を表す。
  • Element：各HTML要素（例：<div>, <p>）。
  • Text：テキストノード。要素内のテキストを表す。
  • Comment：コメントノード。HTMLのコメントを表す。

DOM操作

DOM APIを使用することで、以下のような操作が可能です：

  • 要素の取得：const element = document.getElementById('example');
  • 要素の作成と追加：const newElement = document.createElement('div'); document.body.appendChild(newElement);
  • 属性の変更：element.setAttribute('class', 'new-class');
  • テキスト内容の変更：element.textContent = '新しいテキスト';

DOMイベント

DOMでは、ユーザーの操作（クリック、入力、ページロードなど）に応じてイベントを処理できます。イベントリスナーを追加することで、インタラクティブなウェブページを作成できます。

element.addEventListener('click', function() {
  alert('Element clicked!');
});

DOMの利点

DOMを使用することで、ウェブページの動的な更新やインタラクションの実現が容易になります。これにより、ユーザー体験を向上させるインタラクティブなウェブアプリケーションの構築が可能です。

まとめ

DOMは、ウェブページの内容や構造をプログラムで操作するための強力なツールです。DOMの基本を理解し、適切に活用することで、動的で魅力的なウェブサイトを作成することができます。