DOM とは？初心者が知るべき基本概念と活用例

フロントエンド開発•2025/1/21

JavaScript Web Components React Vue.js jQuery

DOM (Document Object Model) とは？

皆さんは普段、ブラウザで表示されるWebページを眺めながら「画面上にある文字や画像は、どのような仕組みで成り立っているのだろう」と感じることはないでしょうか？

DOM は、そんなWebページの構造をブラウザ上で扱うための仕組みです。

一言でいえば、HTMLやXMLといった文書を、プログラミングで操作できるようにしたモデルです。

特にJavaScriptからHTMLを操作する際に欠かせない概念なので、Web開発に携わるなら必ず理解しておきたい部分だといえます。

ここでは、プログラミング初心者の皆さんでも読み進めやすいように、DOM の基本構造や具体的な操作方法、実務での活用例などを中心に解説していきます。

難しい用語は極力使わず、短い段落で説明していきますので、少しずつ頭の中でイメージを膨らませてみてください。

なぜDOMが必要なのか

そもそもWebページは、HTMLというマークアップ言語を使って構造を記述することで成立しています。

ですが、ただHTMLを記述しただけでは、動きのある仕組みやインタラクティブな要素を実装するのは難しいです。

そこで登場するのが、DOM です。

DOM は、HTMLをプログラム的に扱えるように「文書をオブジェクトとして表現したもの」です。

これにより、JavaScriptからHTMLの要素を取得したり、テキストの内容を変更したり、ボタンをクリックしたときの挙動を制御できたりします。

もしDOM がなければ、HTMLをただテキストとして解釈するしかありません。

そうなると、JavaScriptで「どこの部分をどう変更するか」という指定ができなくなってしまいます。

皆さんがWebで見かけるような、アニメーションやインタラクションが組み込まれたサイトを作るうえで、DOM は重要な土台になっています。

DOMの基本構造

Webページは、上から順番に階層構造をもっています。

タイトルやメタ情報を含む <head>、画面に表示される <body> などが並び、さらにその中にタグがネストされていくイメージです。

DOM は、この階層構造を木のように表現して、親要素と子要素の関係を明確に示しています。

たとえば下のようなHTMLがあるとします。


<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
  </head>
  <body>
    <h1>見出し</h1>
    <p>段落です</p>
  </body>
</html>

ここでは <html> が最上位の要素で、その下に <head> と <body> が並んでいます。

さらに <body> の下には <h1> や <p> といった要素がぶら下がっています。

このような階層をプログラムで扱えるようにしたのが DOM です。

DOM では、各タグを ノード と呼び、それらがツリー状につながっていると考えます。

これはシンプルに見えますが、より複雑なページになるほど多くの要素が追加され、ノード同士の位置関係を把握することがポイントになります。

JavaScriptでDOMを操作する方法

DOM はJavaScriptから簡単に操作できます。

具体的にどのように記述すればよいのか、初心者の皆さんでも取り組みやすい部分を見てみましょう。

要素を取得する

DOM操作の第一歩は「HTML要素をプログラムで取得する」ことです。

よく使われる方法としては document.getElementById("id名") があります。

HTMLに次のような要素があったとします。


<div id="demo">この文章を変えたい</div>

この要素の内容をJavaScriptで扱う場合は、以下のように書けます。


const demoElement = document.getElementById("demo");
console.log(demoElement.textContent);

上記の例では、demoElement という変数に <div id="demo"> の要素を取得しています。

あとは textContent を使うと、その要素内のテキストを参照できます。

要素の内容を変更する

取得した要素のテキストを変更したい場合は、textContent に新しい文字列を代入します。


demoElement.textContent = "新しい文章に変更しました";

これだけで、画面に表示されるテキストが変化します。

HTMLの属性を変更したり、クラス名を付け替えたりすることも可能です。

たとえば、クラス名を追加する場合は demoElement.classList.add("active") のように書くこともできます。

イベントリスナーを使う

ボタンクリックやマウスホバーなど、特定のタイミングでプログラムを実行するには、イベントリスナーを設定します。

下記の例を見てみましょう。


<button id="btn">クリックしてね</button>
<div id="msg"></div>

<script>
  const button = document.getElementById("btn");
  const message = document.getElementById("msg");

  button.addEventListener("click", () => {
    message.textContent = "ボタンがクリックされました";
  });
</script>

button をクリックすると、message 要素のテキストが書き換わります。

これは DOM でボタン要素を取得し、その上で「クリックされたらこの関数を実行する」というイベントリスナーを設定しているからです。

実務での活用シーン

実務では、フォームの入力チェックや動的なコンテンツの生成など、さまざまな場面で DOM 操作が使われています。

フォームに入力された値をチェックして、エラーがあればメッセージを表示する。

こういった処理は、まさに DOM を操作する代表例だといえます。

また、AjaxやFetch APIを使って取得したデータを元に、新たに <div> や <li> を生成し、既存の要素に追加するといった方法もあります。

これはユーザーがページを離れずに、新しいコンテンツを動的に追加できるため、多くのWebアプリケーションで活用されています。

さらにSPA（Single Page Application）の概念も、画面全体を再読み込みせずにコンテンツを切り替えるため、内部ではDOM操作が使われています。

フレームワークを使うと直接DOMに触れる機会は減りますが、仕組みを理解しておくことでバグやトラブルに対処しやすくなります。

DOM操作のパフォーマンスと最適化

DOMを頻繁に操作しすぎると、ブラウザのレンダリングに負担がかかる場合があります。

とくに大規模なWebアプリでは、微細な変更を何度もDOMに適用すると、画面の再描画が繰り返されて動作が重くなるケースが生じます。

そこで、以下のような工夫がよく行われます。

必要最小限の更新だけを行う
まとめてHTML要素を生成してから、一度にDOMに挿入する
一時的に画面から要素を外して、変更を加えてから戻す

これらの方法により、画面の再描画回数を減らし、パフォーマンスの低下を防ぐことができます。

複雑なアニメーションや連続的な要素追加が必要な場合は、とくにDOM操作の回数を意識しましょう。

DOM操作は強引にやりすぎると、ユーザー体験を損なう可能性もあるので、状況に応じて最適化を行うと良いですね。

DOMの発展的な話題

最近では、ReactやVue、Angularといったフレームワークが登場し、直接DOMを触る機会が減ったという声も聞かれます。

しかし、彼らも最終的にはDOMを操作しています。

Virtual DOMやShadow DOMといった仕組みを用いて、効率よくレンダリングする技術を取り入れているのが特徴です。

とくに Virtual DOM は、フレームワーク側でDOMの状態を一時的に仮想的に管理し、変更点だけを本物のDOMに適用するので、パフォーマンス向上につながります。

一方で Shadow DOM は、Web Componentsの一部として、他のスタイルやJavaScriptコードから影響を受けにくいコンポーネントを作成するときに利用されます。

このような仕組みを理解すると、フレームワークが裏側でどのようにDOMを扱っているかをイメージしやすくなります。

Web Componentsを使うと、JavaScriptだけで独立したUI部品を作れますが、やはり根っこにあるのはDOMです。

技術が進化しても、基礎としての DOM の知識が色あせることはありません。

まとめ

ここまで DOM とは何か、そしてそれを使った具体的な操作方法や実務での使い道を見てきました。

HTMLを単なるテキストではなく、ツリー構造として扱えるようにしたのが DOM であり、それがあるからこそJavaScriptによるダイナミックなページ更新やユーザーの操作への反応が可能になります。

プログラミング初心者の皆さんにとって、最初は要素を取得するだけでも戸惑うかもしれません。

しかし、DOMの階層構造とイベントの概念を理解すれば、画面上のパーツを自由に動かせるようになります。

初めから完璧に覚える必要はありません。

まずは要素の取得とテキスト変更、イベントリスナーの設定など、よく使われる部分を押さえるところから始めてみましょう。

今回は、DOMがどのような概念なのか、そして具体的にどんな操作ができるかを整理しました。

Web開発には欠かせない要素なので、ぜひ少しずつ慣れながら理解を深めてください。