DOM(ドム)とは | 意味や読み方など丁寧でわかりやすい用語解説
DOM(ドム)の意味や読み方など、初心者にもわかりやすいように丁寧に解説しています。
読み方
日本語表記
ドム (ドム)
英語表記
DOM (ドム)
用語解説
DOMとは、WebブラウザがHTMLやXMLドキュメントを解釈し、プログラムから操作できるように表現したモデルである。Document Object Modelの略で、ドキュメントの構造、内容、スタイルを、オブジェクトの集まりとして扱うための標準的なインターフェースを提供する。これにより、JavaScriptなどのスクリプト言語を用いて、Webページの要素を動的に追加、削除、変更したり、ユーザーの操作に応じてページの見た目を変化させたりすることが可能になる。DOMは、ドキュメントを論理的な木構造（ツリー構造）として表現し、各要素をノードとして扱うことで、階層的な関係性を明確にする。
静的なHTMLドキュメントは、一度ブラウザに読み込まれるとそれ自体では変化しない。しかし、現代のWebアプリケーションでは、ユーザーの操作に応じてリアルタイムに表示を更新したり、サーバーから取得したデータを元に新しいコンテンツを生成したりする必要がある。この動的な操作を実現するためにDOMが存在する。WebブラウザはHTMLファイルを解析（パース）し、その内容をDOMツリーとしてメモリ上に構築する。このツリーの各部分は「ノード」と呼ばれ、それぞれが固有の役割を持つオブジェクトである。
主要なノードの種類には、Webページ全体を表す「ドキュメントノード」（documentオブジェクト）、HTMLのタグに対応する「要素ノード」（例: div、p、aといったHTML要素）、タグ間のテキストコンテンツを表す「テキストノード」（例: <p>ここにテキスト</p>の「ここにテキスト」の部分）、要素の属性を表す「属性ノード」（例: <div id="main">のid="main"の部分）などがある。これらのノードは、親子関係や兄弟関係を持ちながら階層的に配置され、一つの大きなツリー構造を形成する。例えば、<body>要素は<html>要素の子ノードであり、その<body>要素の内部にある<p>要素は<body>の子ノードとなる。また、同じ親を持つ<p>要素と<div>要素は兄弟ノードの関係にある。
JavaScriptのようなスクリプト言語は、DOMが提供するAPI（Application Programming Interface）を利用して、このツリー構造にアクセスし、ノードを操作する。具体的な操作には、特定のIDやクラス名を持つ要素ノードを検索して取得する（例: document.getElementById('myElement')やdocument.querySelector('.myClass')）、新しい要素ノードを作成する（例: document.createElement('div')）、既存の要素ノードの子として新しい要素ノードを追加する（例: parentNode.appendChild(newElement)）、あるいは既存の要素ノードを削除する（例: parentNode.removeChild(targetElement)）といったものがある。さらに、要素ノードのテキストコンテンツを変更したり（例: element.textContent = '新しいテキスト'）、HTMLコンテンツを直接書き換えたり（例: element.innerHTML = '<b>太字のテキスト</b>'）、属性の値を設定・取得したり（例: element.setAttribute('class', 'active')、element.getAttribute('id')）することも可能である。これらの操作が実行されると、ブラウザはDOMツリーの変更を検知し、Webページの表示を自動的に更新する。これにより、ユーザーはWebページの動的な変化を視覚的に確認できる。
DOMの標準は、World Wide Web Consortium (W3C) によって策定されており、DOM Level 1、DOM Level 2、DOM Level 3といったバージョンを経て進化してきた。これにより、異なるWebブラウザ間でもDOMの挙動に一貫性を持たせ、開発者が同じコードで複数のブラウザに対応できるようにすることが目指されている。現代のWebブラウザは、これらのW3C標準をベースにしつつ、ウェブ標準を維持するためのWHATWGによって定義される「DOM Living Standard」といった形で継続的に進化する仕様にも対応している。しかし、完全に統一されているわけではなく、古いブラウザや特定の環境では、一部のAPIのサポート状況や挙動に微妙な差異が生じる場合があるため、開発者は注意を払う必要がある。
DOM操作は、Webページの見た目や機能に直接的な影響を与える一方で、その処理にはコストがかかる場合がある。特に、頻繁かつ大規模なDOMの変更は、ブラウザの再描画（リフローやリペイント）を誘発し、Webページのパフォーマンス低下を引き起こす可能性がある。そのため、効率的なWebアプリケーションを開発する際には、不必要なDOM操作を避けたり、複数の変更をまとめて一度に実行したり、あるいは仮想DOMといった最適化技術を利用したりするなど、DOM操作の回数や範囲を最小限に抑える工夫が求められる。DOMは、Webフロントエンド開発における最も基礎的で重要な概念の一つであり、その理解はWebアプリケーションを効果的に構築し、デバッグするために不可欠である。