DOM（Document Object Model）

DOM（Document Object Model／ドム）とは、HTMLやXMLで書かれた文書を、プログラムから読み書きできるようにツリー（木）構造のデータとして表現する仕組みです。Webブラウザは、HTMLを読み込むとDOMを作り、そのDOMをもとに画面へ表示を行います。

現実世界に例えると、DOMは「本の目次のような階層構造」です。本全体（文書）の中に章があり、章の中に節がある、節の中に段落があるように、DOMではHTML全体の中にタグが入れ子になって階層的に並んでおり、その一つひとつを個別に取り出したり書き換えたりできます。

DOM図解

DOMの仕組み

Webブラウザは、HTMLファイルを読み込むと、その内容を解析して「Document（文書全体）」を頂点に、タグ1つひとつを「Element（要素）」や「Node（ノード）」としてツリー状に組み立てます。JavaScriptなどのプログラムは、このツリーにアクセスすることで、画面の内容を自由に取得・変更できます。

DOMツリーの主な用語

プログラムからの操作例

JavaScriptでは、document.getElementById()やdocument.querySelector()といった命令を使い、DOMツリーの中から特定の要素を取り出すことができます。取り出した要素の文字や見た目を書き換えれば、ページを再読み込みすることなく画面の内容を動的に変更できます。

イベントとの関係

DOMは、単に文書構造を表すだけでなく、クリックやキー入力といった「イベント」を扱う仕組みとしても使われます。ボタン要素に対してイベントを登録しておくことで、ユーザーがクリックした瞬間にプログラムを実行する、といった操作が可能になります。この仕組みはDOMイベントと呼ばれ、Webページを対話的に動かすうえで欠かせない機能です。

DOM操作の課題

DOMを直接何度も操作すると、そのたびにブラウザが画面の再計算・再描画を行うため、更新するデータの量が増えるほど処理が重くなりやすいという課題があります。この課題に対応するために考え出されたのが「仮想DOM」という仕組みで、ReactやVue.jsなどのフレームワークで広く採用されています。

あわせて知っておきたい用語

• 仮想DOM：
  実際のDOMを直接操作せず、変更差分だけを効率よく反映する仕組みです。
• HTML：
  Webページの構造を記述するためのマークアップ言語です。
• JavaScript：
  Webページに動きをつけるためのプログラミング言語です。