DOM

DOM（Document Object Model）は、HTMLをJavaScriptから操作するための仕組みです。

DOMはWHATWGというHTMLの標準仕様を作っている団体が策定した「DOM Living Standard」という標準仕様で定められています。

各ブラウザ（Chrome、Firefox、Safariなど）はこの仕様に従ってDOMを独自に実装しています。
同じウェブサイトなのにブラウザによって挙動や安定性が違ったりする場合があるのはこれが影響しています。

なぜDOMが必要なのか

HTMLファイルはただのテキストです。テキストのままでは、ボタンをクリックしたときに何かを表示したり、入力内容に応じて画面を変えたりすることができません。

ブラウザがHTMLを読み込むと、DOMはその内容を「オブジェクト」として扱えるようにしてくれます。
このオブジェクトを通じて、JavaScriptからページの内容を変更できます。
DOMがあることで、JavaScriptからページの内容をリアルタイムに変更できるようになります。

どんな場面で使われているか

普段使っているWebサイトの多くがDOMを活用しています。

ページを再読み込みせずに画面が変わる機能は、ほぼすべてDOMを操作して実現されています。

※厳密にはDOM自体がページを書き換えることはありません。DOMはJavaScriptがページを変更するために必要な「オブジェクト」を提供します。実際の変更はJavaScriptが行いますが、DOMがなければその変更はできません。

DOMを実際に確認してみよう

1. ChromeでF12をクリックして、開発者モードにしましょう。
2. Elementsタブをクリックすると実際のDOMが確認できます。

DOMはブラウザに表示されたHTMLをツリー状（木構造）に変換します。
そして、それぞれのパーツを「オブジェクト」として扱えるようにしてくれています。

まとめ

最初はDOMがページに変化を与えてくれるくらいの認識でいいと思います。