DOMとBOMとの違い：関係性をわかりやすく徹底比較

JavaScriptは、ブラウザ上で動作し、Webページに動的な振る舞いを与えるための中心的な言語です。HTMLだけで作られたページは基本的に静的な表示になりますが、JavaScriptを使うことで、ボタンを押したときに画面を切り替える、入力内容をリアルタイムに反映する、URLを変更する、前のページへ戻る、ブラウザ情報を取得するなど、さまざまな処理を実現できます。

このとき重要になる概念が、DOMとBOMです。DOMはDocument Object Modelの略で、WebページのHTML構造をJavaScriptから操作するための仕組みです。一方、BOMはBrowser Object Modelの略として使われることが多く、ブラウザのウィンドウ、URL、履歴、画面サイズ、端末情報などをJavaScriptから扱うための仕組みを指します。簡単に言えば、DOMは「ページの中身」を扱い、BOMは「ブラウザそのもの」を扱います。

たとえば、見出しのテキストを変更したり、ボタンにCSSクラスを追加したり、リスト項目を増やしたりする処理はDOM操作です。一方、現在のURLを取得する、別ページへリダイレクトする、ブラウザ履歴を戻る、ユーザーエージェントを確認する、画面サイズを取得するような処理はBOMに関係します。どちらもJavaScriptから利用されるため混同されやすいですが、操作対象と役割は異なります。

本記事では、DOMとは何か、BOMとは何か、それぞれの構造とできること、DOMとBOMの違い、両者の関係、代表的なオブジェクト、具体例、フロントエンド開発での役割、ReactやVueなどのフレームワークとの関係、パフォーマンス上の注意点、実務での使い分けまで体系的に解説します。

1. DOMとは？

DOMとは、HTMLやXMLの文書をツリー構造のオブジェクトとして表現し、JavaScriptなどのプログラムから操作できるようにする仕組みです。ブラウザはHTMLを読み込むと、その内容を解析してDOMツリーを構築します。JavaScriptはこのDOMツリーにアクセスすることで、要素を取得したり、テキストを変更したり、属性を追加したり、スタイルを変更したりできます。

DOMは、Webページの見た目や内容を動的に変更するための基本です。たとえば、ユーザーがボタンをクリックしたときにメッセージを表示する、フォーム入力に応じてエラー文を表示する、APIから取得したデータを一覧として表示する、といった処理はDOMを通じて実現されます。フロントエンド開発において、DOMの理解はJavaScriptによるUI操作の基礎になります。

主な特徴

1.1 Document Object Modelの意味

Document Object Modelは、日本語では文書オブジェクトモデルと説明されます。ここでいうDocumentはHTML文書を指し、Object Modelはその文書をプログラムから扱えるオブジェクト構造として表現する仕組みを意味します。つまりDOMは、HTMLを単なるテキストではなく、JavaScriptから操作可能な構造として扱うためのモデルです。

たとえば、HTMLに<h1>タイトル</h1>という要素があった場合、ブラウザはそれをDOM上のh1要素として扱います。JavaScriptでは、このh1要素を取得してテキストを変更できます。HTMLファイルに書かれた内容は初期状態であり、DOMを操作することで読み込み後の画面を動的に変化させられます。

1.2 HTMLとの関係

HTMLはWebページの構造を記述するためのマークアップ言語です。見出し、段落、画像、リンク、フォーム、リストなどをタグで表現します。一方、DOMは、そのHTMLをブラウザが読み込んだ後に作成する内部的なオブジェクト構造です。HTMLとDOMは密接に関係していますが、完全に同じものではありません。

たとえば、JavaScriptで新しい要素を追加した場合、その要素は元のHTMLファイルには存在しなくても、ブラウザ上のDOMには存在します。また、ブラウザは不完全なHTMLを補正してDOMを構築することもあります。そのため、開発者ツールで見えるDOM構造は、元のHTMLソースと少し異なる場合があります。実務では、HTMLソースと現在のDOM状態を区別して理解することが重要です。

2. DOMの構造

DOMはツリー構造で表現されます。最上位にはdocumentがあり、その下にhtml要素、さらにheadやbodyがあり、bodyの中にheader、main、section、button、pなどの要素が階層的に配置されます。このような親子関係を持つ構造がDOMツリーです。

DOMツリーを理解すると、JavaScriptで要素を取得したり、子要素を追加したり、親要素をたどったりする処理が分かりやすくなります。DOM操作は単にメソッドを覚えるだけではなく、Webページがどのような階層構造としてブラウザに認識されているかを理解することが重要です。

2.1 ツリー構造

DOMのツリー構造では、HTML文書全体が階層的なノードの集まりとして表現されます。たとえば、documentの下にhtmlがあり、htmlの下にheadとbodyがあり、bodyの下に複数の要素が配置されます。各要素は親子関係や兄弟関係を持ちます。

このツリー構造によって、JavaScriptは特定の要素から親要素へ移動したり、子要素を取得したり、兄弟要素を参照したりできます。たとえば、リスト要素の中に新しい項目を追加する場合、親となるul要素を取得し、その中にli要素を追加します。DOMの親子関係を理解することは、正確なUI操作に欠かせません。

2.2 ノード

ノードとは、DOMツリーを構成する一つ一つの要素です。HTMLタグに対応する要素ノード、文字列に対応するテキストノード、属性に対応する属性ノード、コメントに対応するコメントノードなどがあります。通常のDOM操作では要素ノードを扱うことが多いですが、テキストや属性もDOMの一部です。

たとえば、<p>Hello</p>というHTMLでは、pタグが要素ノードであり、Helloという文字列がテキストノードです。JavaScriptでtextContentを変更すると、このテキストノードに相当する内容が変わります。DOMは見た目のHTMLタグだけでなく、その内部の文字や属性も構造として扱っている点が重要です。

2.3 要素・属性・テキスト

DOMでは、HTML要素、属性、テキストをそれぞれ操作できます。要素とはdiv、p、button、imgなどのタグに対応する部分です。属性とはid、class、src、href、alt、disabledなどの情報です。テキストは要素内に表示される文字列です。

たとえば、画像のsrc属性を変更すれば表示画像が変わり、リンクのhref属性を変更すれば遷移先が変わります。ボタンのテキストを変更すれば、画面上に表示されるラベルが変化します。このように、DOMはWebページの構造だけでなく、内容や属性もJavaScriptから操作できるようにしています。

3. DOMでできること

DOMを使うと、Webページの内容や構造をJavaScriptから動的に変更できます。HTMLのテキストを書き換える、要素を追加する、不要な要素を削除する、CSSクラスを切り替える、属性を変更する、イベントを登録するなど、さまざまな操作が可能です。

DOMでできることは、ユーザーインターフェースの構築に直結します。現代のWebサイトでは、ユーザー操作に応じて画面が変化することが当たり前です。その多くは、DOMを通じて実現されています。ReactやVueなどを使う場合でも、最終的にはDOMが更新されて画面が変化します。

3.1 HTMLの変更

DOMを使うと、HTML要素の内容を変更できます。たとえば、見出しのテキストを変更する、段落の内容を差し替える、ボタンのラベルを変更する、といった操作ができます。JavaScriptでは、textContentやinnerHTMLなどを使って要素の中身を変更します。

HTMLの変更は、Webページを動的にする基本です。たとえば、フォーム送信後に「送信が完了しました」と表示する、検索結果の件数を表示する、ログイン状態に応じてユーザー名を表示するなどの処理は、DOMの内容変更によって実現されます。

3.2 要素の追加・削除

DOMでは、新しい要素を作成してページに追加したり、不要な要素を削除したりできます。createElementで要素を作成し、appendChildやappendで親要素に追加できます。また、removeなどを使って要素を削除できます。

要素の追加・削除は、動的なリスト表示や通知表示、モーダル、コメント欄、商品一覧などでよく使われます。APIから取得したデータをもとにカードを生成し、画面に追加するような処理もDOM操作の一例です。UIを柔軟に変化させるために欠かせない機能です。

3.3 スタイル操作

DOMでは、要素のスタイルを変更することもできます。JavaScriptから直接styleプロパティを変更したり、classListを使ってCSSクラスを追加・削除したりできます。実務では、見た目の詳細をJavaScriptに直接書くより、CSSクラスを切り替える方法がよく使われます。

たとえば、エラー時に入力欄へis-errorクラスを追加する、メニューを開くときにis-openクラスを付ける、選択中のタブにis-activeクラスを付けるといった使い方です。DOM操作とCSSを組み合わせることで、状態に応じた見た目の変化を管理しやすくなります。

4. DOM操作の例

DOM操作は、JavaScriptによるWebページ制御の基本です。要素を取得し、内容を変更し、イベントを登録するという流れを理解すれば、多くのUI操作を実装できます。特に、querySelector、innerHTML、textContent、classList、addEventListenerなどは使用頻度が高い基本APIです。

DOM操作の例を理解すると、Webページがどのように動的に変化しているのかが分かりやすくなります。フレームワークを使う場合でも、内部で行われているDOM更新のイメージを持つことは重要です。

4.1 innerHTML操作

innerHTMLは、要素内のHTMLを取得・変更するためのプロパティです。たとえば、あるコンテナ要素の中にリストやカードのHTMLを挿入する場合に使えます。短い処理でHTML構造をまとめて変更できるため、簡単な動的表示では便利です。

const container = document.querySelector("#result"); container.innerHTML = "<p>検索結果を表示しました。</p>";

ただし、innerHTMLには注意点があります。ユーザー入力や外部データをそのまま挿入すると、クロスサイトスクリプティングのリスクが発生する可能性があります。安全性を重視する場合は、textContentやcreateElementを使って要素を作成する方が適していることがあります。

4.2 要素取得

DOM操作では、まず対象となる要素を取得します。代表的な方法には、getElementById、querySelector、querySelectorAllがあります。現在の実務では、CSSセレクタの感覚で使えるquerySelectorとquerySelectorAllがよく利用されます。

const button = document.querySelector(".submit-button"); const items = document.querySelectorAll(".list-item");

要素取得で重要なのは、対象要素が存在するか確認することです。存在しない要素に対してDOM操作を行うとエラーになります。特に複数ページで同じJavaScriptを読み込む場合、ページによって要素が存在しないこともあるため、取得結果を確認してから処理することが大切です。

4.3 イベント処理

DOM操作では、イベント処理も重要です。ユーザーがクリックした、入力した、フォームを送信した、スクロールしたといった操作を検知し、そのタイミングでDOMを変更します。addEventListenerを使うことで、要素にイベント処理を登録できます。

const button = document.querySelector(".change-button"); const text = document.querySelector(".message"); button.addEventListener("click", () => {  text.textContent = "ボタンがクリックされました。"; });

イベント処理を使うことで、Webページはユーザー操作に反応できるようになります。ボタンで表示を切り替える、入力内容をリアルタイムにチェックする、タブを切り替える、モーダルを開くなど、多くのUIはイベントとDOM操作の組み合わせで作られています。

5. BOMとは？

BOMとは、Browser Object Modelの略として使われることが多く、JavaScriptからブラウザの機能にアクセスするための仕組みを指します。DOMがWebページの中身を扱うのに対して、BOMはブラウザウィンドウ、URL、履歴、画面情報、ブラウザ情報などを扱います。代表的なオブジェクトには、window、location、history、navigator、screenなどがあります。

ただし、BOMはDOMのように一つの明確な標準仕様として扱われるというより、ブラウザが提供する各種APIの総称として使われることが多い言葉です。実務上は、ブラウザそのものに関する操作や情報取得を行うAPI群をBOMと理解すると分かりやすいです。

主な特徴

5.1 ブラウザ機能へのアクセス

BOMを使うと、JavaScriptからブラウザ機能にアクセスできます。たとえば、現在のURLを取得する、別のURLへ移動する、前のページへ戻る、ブラウザの言語設定を確認する、画面サイズを取得するなどの処理が可能です。これらはWebページのHTML構造ではなく、ブラウザ環境そのものに関する処理です。

たとえば、window.location.hrefを使えば現在のURLを取得したり、別ページへ遷移させたりできます。history.back()を使えばブラウザの戻る操作を実行できます。navigator.userAgentを使えばブラウザや端末に関する情報を取得できます。これらはBOMに関連する代表的な操作です。

5.2 DOMとの違い

BOMとDOMの違いは、操作対象にあります。DOMはWebページのHTML文書を操作するための仕組みです。一方、BOMはブラウザのウィンドウや履歴、URL、端末情報などを扱う仕組みです。つまり、DOMはページ内部、BOMはブラウザ環境を扱います。

たとえば、ページ上の見出しを書き換える処理はDOM操作です。一方、現在のURLを取得する処理はBOM操作です。どちらもJavaScriptから使うため混同されやすいですが、対象が「document」なのか「windowやlocation」なのかを意識すると違いが分かりやすくなります。

6. BOMの構成要素

BOMには、ブラウザ環境を扱うためのさまざまなオブジェクトがあります。中心となるのはwindowオブジェクトで、その配下にdocument、location、history、navigator、screenなどが存在します。JavaScriptのグローバルオブジェクトとしてもwindowは重要な役割を持っています。

BOMを理解すると、JavaScriptがページ内のDOMだけでなく、ブラウザ全体とどのように関係しているかが分かります。URL変更、画面遷移、履歴操作、ブラウザ情報取得などは、実務でも頻繁に使われる処理です。

6.1 windowオブジェクト

windowオブジェクトは、ブラウザ環境における最上位のオブジェクトです。ブラウザのウィンドウそのものを表し、DOMの入口であるdocumentもwindowのプロパティとして存在します。また、setTimeout、setInterval、alert、localStorageなどもwindowに関係する機能です。

JavaScriptでは、グローバルに定義した変数や関数がwindowのプロパティとして扱われる場合があります。そのため、windowはBOMの中心であり、ブラウザ上で動くJavaScript全体の実行環境とも深く関係しています。実務では、windowに依存しすぎるとテストや保守が難しくなるため、必要な場面に限定して利用することが大切です。

6.2 location

locationは、現在のページのURL情報を扱うオブジェクトです。location.hrefで現在のURLを取得したり、値を変更して別のページへ遷移させたりできます。また、location.pathname、location.search、location.hashなどを使うことで、URLのパス、クエリ文字列、ハッシュ部分を取得できます。

locationは、リダイレクト、URL解析、ページ遷移、検索条件の取得などでよく使われます。たとえば、クエリパラメータに基づいて検索結果を表示する場合や、ログイン後に特定ページへ移動させる場合に利用されます。SPAでは、フレームワークのルーターが内部的にURL操作を扱うこともあります。

6.3 history

historyは、ブラウザの履歴を操作するためのオブジェクトです。history.back()で前のページへ戻り、history.forward()で次のページへ進み、history.pushState()でページを再読み込みせずにURLを変更できます。SPAのルーティングでは、history APIが重要な役割を持ちます。

historyを使うと、ユーザーのナビゲーション体験を制御できます。ただし、履歴操作はユーザーの期待に関わるため、慎重に使う必要があります。戻るボタンの挙動が不自然になると、ユーザー体験が悪くなる場合があります。URLと画面状態を正しく同期させる設計が重要です。

6.4 navigator

navigatorは、ブラウザや端末に関する情報を取得するためのオブジェクトです。ユーザーエージェント、言語設定、オンライン状態、クリップボード、位置情報など、さまざまなブラウザ機能に関係します。機能によってはユーザー許可が必要になるものもあります。

navigatorは、ブラウザ判定や端末情報の取得で使われることがあります。ただし、ユーザーエージェントに依存した判定は信頼性が低い場合もあるため、実務では機能検出を優先することが多いです。ブラウザ情報を取得できるからといって、安易に端末判定へ使うのではなく、目的に応じて慎重に利用する必要があります。

7. BOMでできること

BOMを使うと、URL操作、画面遷移、ブラウザ情報取得などが可能です。DOMがページ内の要素を操作するのに対し、BOMはブラウザの状態や機能を扱います。Webアプリケーションでは、ページ表示だけでなく、URLや履歴、端末情報を扱う場面も多いため、BOMの理解は重要です。

たとえば、ログイン後に別ページへリダイレクトする、現在のURLから検索条件を読み取る、戻るボタンを実装する、ブラウザの言語設定に応じて表示を変える、オンライン状態を確認するなどの処理はBOMと関係します。DOMとBOMを組み合わせることで、より実用的なWebアプリを構築できます。

7.1 URL操作

BOMでは、locationを使ってURLを取得・変更できます。現在のページURL、パス、クエリ文字列、ハッシュなどを取得することで、ページの状態や検索条件を判断できます。また、location.hrefに別のURLを設定すれば、リダイレクトを行うこともできます。

console.log(window.location.href); window.location.href = "/login";

URL操作は、ログイン認証、検索ページ、フィルター条件、共有リンク、ページ遷移などで重要です。特にSPAでは、URLと画面状態を対応させることで、ブラウザの戻る・進む操作やページ共有に対応できます。

7.2 画面遷移

BOMでは、locationやhistoryを使って画面遷移を制御できます。単純なページ移動であればlocationを使い、履歴を細かく制御したい場合はhistory APIを使います。SPAでは、ページ全体を再読み込みせずにURLを変更し、画面内容だけを切り替えることがあります。

history.pushState({ page: "about" }, "", "/about");

画面遷移はユーザー体験に大きく関わります。URLが変わったのに画面が変わらない、戻るボタンが効かない、履歴が不自然に増えるといった問題があると、使いにくいアプリになります。BOMを使う場合は、URL、履歴、画面状態を整合させることが重要です。

7.3 ブラウザ情報取得

BOMでは、navigatorやscreenなどを使ってブラウザや画面に関する情報を取得できます。たとえば、ブラウザの言語、オンライン状態、画面幅や高さ、ユーザーエージェントなどを取得できます。これらは、表示最適化や機能切り替えに使われることがあります。

console.log(navigator.language); console.log(window.innerWidth);

ただし、ブラウザ情報の取得には注意が必要です。ユーザーエージェントは偽装される場合があり、端末判定に使うと誤判定が起きることがあります。また、プライバシーに関係する情報の取得には制限がある場合もあります。実務では、必要最小限の情報だけを利用することが望ましいです。

8. DOMとBOMの違い

DOMとBOMの違いを一言で表すと、DOMはWebページの中身を扱い、BOMはブラウザそのものを扱うという違いです。DOMではHTML要素、属性、テキスト、イベントなどを操作します。一方、BOMではwindow、location、history、navigatorなどを通じて、ブラウザ環境やURL、履歴を操作します。

どちらもJavaScriptからアクセスできるため、初学者は混同しやすいです。しかし、操作対象を意識すれば違いは明確です。ページ上のボタンやテキストを変更するならDOM、URLやブラウザ履歴を操作するならBOMです。この区別は、フロントエンド開発の基礎として非常に重要です。

8.1 対象の違い

DOMの対象は、HTML文書の構造です。具体的には、見出し、段落、画像、リンク、フォーム、ボタン、リストなど、Webページ内に存在する要素を扱います。DOM操作では、これらの要素を取得・変更・追加・削除します。

BOMの対象は、ブラウザ環境です。具体的には、ブラウザウィンドウ、現在のURL、履歴、画面サイズ、ブラウザ情報、タイマーなどを扱います。BOM操作では、Webページの中身ではなく、ページを表示しているブラウザ側の機能にアクセスします。

8.2 役割の違い

DOMの役割は、UIを構築・更新することです。ユーザーが見る画面内容を変更したり、操作可能な要素にイベントを設定したり、スタイルを切り替えたりします。Webアプリの見た目や操作感に直接関係します。

BOMの役割は、ブラウザ制御や環境情報の取得です。現在のURLを読み取る、別ページへ移動する、履歴を操作する、ブラウザ情報を取得するなど、Webページの外側にあるブラウザ機能を扱います。Webアプリのナビゲーションや環境対応に関係します。

8.3 依存関係の違い

DOMは、BOMの中心であるwindowオブジェクトの中にあるdocumentを通じてアクセスされます。つまり、ブラウザ環境ではwindow.documentとしてDOMにアクセスできます。ただし、普段はdocumentと省略して書くことが多いです。

BOMはDOMより広いブラウザ環境を扱います。windowの中にはdocument以外にもlocation、history、navigatorなどがあります。そのため、DOMはBOM環境の一部として利用されると考えると、両者の関係が理解しやすくなります。

9. DOMとBOMの関係

DOMとBOMは別々の概念ですが、ブラウザ上のJavaScriptでは密接に連携しています。JavaScriptはwindowオブジェクトを通じてブラウザ環境にアクセスし、その中にあるdocumentを通じてWebページのDOMにアクセスします。つまり、BOMがブラウザ全体の入口であり、DOMはその中でページ文書を扱う仕組みです。

実務では、DOMとBOMを組み合わせて使う場面が多くあります。たとえば、URLのクエリパラメータをBOMで取得し、その値に応じてDOMを更新する処理があります。また、ブラウザ履歴を変更しながら、画面の表示内容をDOMで切り替えるSPAのような実装もあります。

9.1 windowオブジェクトの中にDOMがある

ブラウザ環境では、windowオブジェクトが最上位にあり、その中にdocumentオブジェクトがあります。documentはDOMの入口であり、HTML文書全体を表します。そのため、厳密にはwindow.documentとしてアクセスできますが、通常はdocumentと省略して書きます。

この関係を理解すると、DOMとBOMのつながりが分かりやすくなります。windowはブラウザウィンドウ全体を表し、documentはそのウィンドウ内に表示されているページ文書を表します。つまり、BOMの中にDOMへの入口が含まれていると考えることができます。

9.2 JavaScriptから両方にアクセス可能

JavaScriptは、DOMにもBOMにもアクセスできます。DOMを使えばページ内の要素を操作でき、BOMを使えばブラウザ機能を操作できます。どちらもWebアプリケーション開発では重要であり、片方だけを理解していても十分ではありません。

たとえば、ボタンをクリックしたらURLを変更し、同時に画面の内容も切り替える処理では、DOMとBOMの両方を使います。ボタンのクリック検知や表示更新はDOM、URL変更はBOMです。このように、実際の開発では両者が連携して動作します。

9.3 ブラウザAPIとして統合されている

DOMとBOMは、どちらもブラウザが提供するAPIとしてJavaScriptから利用されます。DOMはWebページ文書を操作するAPIであり、BOMはブラウザ機能を扱うAPI群です。開発者はJavaScriptを通じて、これらを統合的に利用しています。

ただし、DOMは標準化された文書操作モデルとして明確に扱われる一方、BOMは歴史的にブラウザ機能の集合を指す言葉として使われることが多いです。そのため、BOMという言葉は教科書的な説明や学習文脈でよく登場しますが、実務ではwindow、location、historyなど個別のAPI名で語られることも多いです。

10. 主な比較まとめ

DOMとBOMの違いを理解するには、操作対象、主な用途、代表的オブジェクトを比較すると分かりやすいです。DOMはページの構造や内容を扱い、BOMはブラウザ環境やナビゲーションを扱います。どちらもJavaScriptで利用されますが、役割は明確に異なります。

以下の比較表を見ると、DOMとBOMの違いが整理できます。実務では、今書いている処理が「ページ内の要素を変える処理」なのか、「ブラウザの状態を扱う処理」なのかを意識すると、適切なAPIを選びやすくなります。

10.1 操作対象

DOMは、Webページの中にある要素を操作するためのものです。BOMは、Webページを表示しているブラウザ側の機能にアクセスするためのものです。この対象の違いが、DOMとBOMを区別する最も重要なポイントです。

10.2 主な用途

DOMの主な用途は、UI更新、イベント処理、要素の追加・削除、スタイル変更などです。ユーザーが直接見る画面の変化に関係します。たとえば、フォームエラーを表示する、メニューを開く、一覧を生成する、タブを切り替えるといった処理です。

BOMの主な用途は、URL操作、履歴操作、ブラウザ情報取得、画面サイズ取得、タイマー処理などです。ユーザーが見ているページそのものというより、ブラウザ環境やナビゲーション制御に関係します。ログイン後のリダイレクトやSPAのルーティングなどで重要です。

10.3 代表的オブジェクト

DOMの代表的なオブジェクトはdocumentです。documentからHTML要素を取得し、DOMツリーを操作します。Element、Node、EventなどもDOMに関係する重要な概念です。

BOMの代表的なオブジェクトはwindowです。windowの中にlocation、history、navigator、screen、documentなどがあります。windowはブラウザ環境の中心であり、BOMを理解するうえで欠かせない存在です。

11. DOMの具体例

DOMの具体例としては、テキスト変更、要素追加、UI操作があります。これらはフロントエンド開発で頻繁に使われる基本処理です。DOMを操作することで、Webページはユーザー操作やデータ状態に応じて動的に変化します。

実務では、DOM操作を直接書く場合もあれば、ReactやVueなどのフレームワークを通じて間接的にDOMを更新する場合もあります。どちらの場合でも、最終的にはDOMが変更されて画面表示が変わるという点は同じです。

11.1 テキスト変更

テキスト変更は、最も基本的なDOM操作の一つです。たとえば、ユーザーがボタンをクリックしたときにメッセージを変更する、ログイン後にユーザー名を表示する、検索結果の件数を更新するなどの処理で使われます。

const title = document.querySelector("#title"); title.textContent = "DOMによって変更されたタイトル";

このような処理はシンプルですが、DOM操作の基本が詰まっています。要素を取得し、その内容を変更することで、画面上の表示が変わります。Webアプリケーションでは、この基本操作がさまざまな形で使われます。

11.2 要素追加

要素追加は、動的なUIを作るうえで重要です。APIから取得したデータを一覧表示する、ユーザーが追加した項目をリストに反映する、通知メッセージを表示するなどの処理で利用されます。

const list = document.querySelector("#list"); const item = document.createElement("li"); item.textContent = "新しい項目"; list.appendChild(item);

要素追加では、作成した要素をどの親要素に追加するかを意識する必要があります。DOMツリーの構造を理解していれば、適切な場所に要素を挿入できます。大量の要素を追加する場合は、パフォーマンスにも注意が必要です。

11.3 UI操作

UI操作では、DOMとCSSを組み合わせることが多いです。たとえば、ボタンをクリックしたらメニューにis-openクラスを追加し、CSSで表示状態を切り替えるような実装です。JavaScriptは状態を変更し、CSSは見た目を定義するという役割分担ができます。

const menu = document.querySelector(".menu"); const button = document.querySelector(".menu-button"); button.addEventListener("click", () => {  menu.classList.toggle("is-open"); });

このようなUI操作は、ハンバーガーメニュー、アコーディオン、タブ、モーダル、ドロップダウンなどでよく使われます。DOM操作を理解することで、ユーザー操作に応じた画面変化を柔軟に実装できます。

12. BOMの具体例

BOMの具体例としては、URL取得、リダイレクト、デバイス情報取得があります。これらはページ内のHTML要素を直接変更する処理ではなく、ブラウザ環境やナビゲーションに関わる処理です。Webアプリケーションでは、DOM操作と組み合わせて使われることが多いです。

たとえば、現在のURLからクエリパラメータを読み取り、その値をもとにDOMへ検索結果を表示する処理では、URL取得はBOM、検索結果表示はDOMです。このように、実務ではDOMとBOMが連携して一つの機能を実現します。

12.1 URL取得

現在のURLを取得するには、window.location.hrefやlocation.pathname、location.searchなどを使います。URL情報は、ページの状態や検索条件、ルーティング処理で重要です。

console.log(window.location.href); console.log(window.location.pathname); console.log(window.location.search);

URL取得は、検索ページや詳細ページ、ログイン後の遷移先制御などでよく使われます。クエリパラメータを解析すれば、URLに含まれる条件をもとに表示内容を変えることもできます。これはBOMとDOMを組み合わせる代表的な使い方です。

12.2 リダイレクト

リダイレクトは、JavaScriptから別のページへ移動させる処理です。location.hrefにURLを代入することで、指定したページへ遷移できます。ログインが必要なページで未ログインの場合にログインページへ移動させるなど、実務でもよく使われます。

window.location.href = "/login";

ただし、リダイレクトはユーザー体験に大きく影響します。意図しないタイミングでページが移動すると、ユーザーが混乱する可能性があります。また、SPAではフレームワークのルーターを使って遷移する方が適切な場合もあります。状況に応じて使い分けることが重要です。

12.3 デバイス情報取得

BOMでは、navigatorやscreen、windowサイズなどを使ってデバイスやブラウザ環境に関する情報を取得できます。たとえば、ブラウザの言語、オンライン状態、画面幅などを取得できます。

console.log(navigator.language); console.log(window.innerWidth); console.log(window.innerHeight);

ただし、デバイス情報に依存した実装には注意が必要です。ユーザーエージェントによるブラウザ判定は誤判定のリスクがあります。実務では、特定のブラウザを判定するより、必要な機能が使えるかを確認する機能検出を優先することが多いです。

13. フロントエンド開発での役割

フロントエンド開発では、DOMとBOMの両方が重要な役割を持ちます。DOMはUI構築や画面更新を担当し、BOMはブラウザ制御やナビゲーションを担当します。Webアプリケーションは、ページ内の表示だけでなく、URL、履歴、画面サイズ、ブラウザ状態とも関係するため、両方の理解が必要です。

特にSPAやモダンなWebアプリでは、DOMとBOMの連携が重要になります。URLが変わると画面内容が変わり、ユーザー操作に応じて履歴が更新され、ブラウザの戻るボタンにも対応する必要があります。このような処理は、DOMとBOMを組み合わせることで実現されます。

13.1 DOM：UI構築

DOMは、UI構築の中心です。HTML要素を取得し、表示内容を変更し、イベントを登録し、CSSクラスを切り替えることで、ユーザーが操作する画面を作ります。ボタン、フォーム、リスト、カード、モーダル、タブなど、あらゆるUIはDOMと関係しています。

フロントエンド開発では、DOMを直接操作する場合もあれば、フレームワークがDOM更新を代行する場合もあります。ReactやVueを使うと直接DOM操作は減りますが、最終的に画面を構成するのはDOMです。そのため、DOMの理解はフレームワーク利用時にも重要です。

13.2 BOM：ブラウザ制御

BOMは、ブラウザ制御を担当します。現在のURLを取得する、ページを移動する、履歴を操作する、ブラウザ情報を取得する、画面サイズを確認するなどの処理はBOMに関係します。これらはUIそのものではなく、Webアプリの実行環境を扱う処理です。

たとえば、ログイン状態に応じてページをリダイレクトする、URLのクエリに基づいて検索条件を復元する、履歴を使って戻るボタンに対応する、といった処理ではBOMの理解が必要です。BOMは、Webアプリのナビゲーションや環境対応を支える仕組みです。

13.3 両者の組み合わせ

実務では、DOMとBOMを組み合わせて使うことが多くあります。たとえば、URLから検索キーワードを取得し、そのキーワードをもとに検索結果をDOMへ表示する処理があります。この場合、URL取得はBOM、結果表示はDOMです。

また、SPAではhistory APIでURLを変更し、変更された状態に応じてDOMを更新します。BOMによってナビゲーションを制御し、DOMによって画面を表示するという役割分担です。この組み合わせを理解すると、フロントエンド開発の全体像が見えやすくなります。

14. フレームワークとの関係

React、Vue、Angularなどのフレームワークは、DOM操作を効率化し、複雑なUIを管理しやすくするために使われます。これらのフレームワークでは、開発者が直接DOMを操作する場面は少なくなりますが、内部的にはDOM更新が行われています。BOMについても、ルーティングや履歴操作などで利用されます。

フレームワークを使う場合でも、DOMとBOMの理解は重要です。Reactでrefを使う場面、VueでDOM要素へアクセスする場面、ルーターでURLや履歴を操作する場面など、基礎知識があると挙動を理解しやすくなります。フレームワークはDOMとBOMを隠すものではなく、扱いやすくするための抽象化と考えるとよいでしょう。

14.1 ReactとDOM

Reactでは、通常は直接DOMを操作せず、stateやpropsに基づいてUIを宣言的に記述します。状態が変わるとReactが必要なDOM更新を行います。これにより、DOM操作がコードのあちこちに散らばることを防ぎ、複雑なUIを管理しやすくします。

ただし、ReactでもDOMに直接アクセスする場面があります。たとえば、入力欄へフォーカスを当てる、外部ライブラリと連携する、要素サイズを測定する場合などです。そのような場合はrefを使います。Reactを使っていても、DOMの基本を理解しておくことは重要です。

14.2 VueとDOM

Vueも、データに基づいてDOMを更新するフレームワークです。テンプレート構文を使って、データと表示の関係を分かりやすく記述できます。開発者は直接DOMを変更するのではなく、データを変更することで画面を更新します。

Vueでも、必要に応じてDOM要素へアクセスすることがあります。また、Vue RouterではURLや履歴を扱うため、BOMに関連する考え方も重要です。Vueを深く理解するには、DOMとBOMの基礎を押さえておくと役立ちます。

14.3 BOM利用のラッパー

多くのフレームワークやライブラリは、BOMの機能を扱いやすくするラッパーを提供しています。たとえば、React RouterやVue Routerは、history APIやlocationに関係する処理を抽象化し、URLと画面表示を同期しやすくします。

このようなラッパーを使うと、直接history.pushStateやlocation.hrefを書く場面は減ります。しかし、内部で何が起きているのかを理解するにはBOMの知識が必要です。ルーティングの不具合や戻るボタンの挙動を調査する際にも、BOMの理解が役立ちます。

15. パフォーマンスへの影響

DOMとBOMは便利ですが、使い方によってはパフォーマンスに影響します。特にDOM操作は、レイアウト計算や再描画に関係するため、大量に行うと画面が重くなることがあります。BOM操作も、画面サイズの取得や履歴操作、リロードなど、ユーザー体験に影響する場合があります。

パフォーマンスを意識するには、DOM更新を必要最小限にし、不要な再描画を避け、BOM操作を適切なタイミングで行うことが重要です。フレームワークを使う場合でも、過剰な再レンダリングや頻繁なURL変更は問題になることがあります。

15.1 DOM操作コスト

DOM操作にはコストがあります。要素を追加・削除したり、サイズや位置に影響するスタイルを変更したりすると、ブラウザはレイアウト計算や再描画を行う場合があります。大量のDOM操作をループ内で繰り返すと、パフォーマンス低下につながります。

この問題を避けるには、DOM操作をまとめて行う、DocumentFragmentを使う、不要な要素更新を避ける、仮想スクロールを使うなどの工夫が有効です。特に大量データを表示する画面では、DOM要素数そのものを減らすことも重要です。

15.2 再レンダリング問題

DOM操作やフレームワークの状態更新によって、再レンダリングが発生します。必要な再レンダリングは問題ありませんが、不要な更新が多いと、画面が重くなったり、スクロールや入力が遅れたりすることがあります。ReactやVueを使っていても、状態設計が悪いと無駄な更新が増えます。

再レンダリング問題を防ぐには、更新範囲を小さくする、状態を適切に分ける、メモ化を使う、リスト描画を最適化するなどの対策があります。DOMの更新コストを理解していると、フレームワーク利用時のパフォーマンス改善にも役立ちます。

15.3 BOM操作の注意点

BOM操作にも注意が必要です。たとえば、location.hrefを変更するとページ遷移やリロードが発生します。意図しないタイミングで実行すると、ユーザーの入力内容が失われたり、処理途中でページが移動したりする可能性があります。

また、スクロール位置や画面サイズを頻繁に取得する処理も、実装によってはパフォーマンスに影響する場合があります。resizeやscrollイベントでは処理が高頻度で発生するため、throttleやdebounceを使って制御することが重要です。BOM操作はブラウザ環境に直接関わるため、ユーザー体験を意識して使う必要があります。

16. 実務での使い分け

実務でDOMとBOMを使い分けるには、操作対象を意識することが最も重要です。画面内の要素を変更するならDOM、URLや履歴、ブラウザ情報を扱うならBOMです。この基本を押さえるだけで、どのAPIを使うべきか判断しやすくなります。

Webアプリケーションでは、DOMとBOMを単独で使うよりも、組み合わせて使うことが多いです。検索条件をURLに反映し、その条件に応じて画面を更新する、ログイン状態に応じてページを移動し、表示内容を変更するなど、実務の機能は両者の連携で成り立っています。

16.1 UI更新はDOM

UI更新にはDOMを使います。テキスト変更、要素追加、クラス切り替え、フォームエラー表示、モーダル開閉、タブ切り替えなどはDOM操作です。ユーザーが直接見る画面の内容や見た目を変える処理は、基本的にDOMの役割です。

フレームワークを使う場合でも、考え方は同じです。ReactやVueでは、直接DOMを操作する代わりに状態を変更し、フレームワークがDOMを更新します。つまり、UI更新の最終的な対象はDOMであり、フレームワークはその操作を効率化していると考えることができます。

16.2 ナビゲーションはBOM

ナビゲーションにはBOMを使います。URL取得、ページ遷移、履歴操作、リダイレクトなどはBOMに関係します。ユーザーがどのページにいるのか、どのURLを表示しているのか、戻るボタンでどの画面に戻るのかを管理するために重要です。

SPAでは、フレームワークのルーターがBOMの機能を抽象化してくれます。直接history APIを書くことは少なくても、ルーティングの内部ではBOMに関係する処理が行われています。ナビゲーションの不具合を理解するには、BOMの基礎が役立ちます。

16.3 状態管理との連携

DOMとBOMは、状態管理とも連携します。たとえば、URLのクエリパラメータをアプリの状態として扱い、その状態に応じてDOMを更新するケースがあります。検索条件、ページ番号、タブ状態、フィルター条件などをURLに反映すれば、ページ共有や戻るボタンにも対応しやすくなります。

状態管理を設計する際は、どの状態をDOMに表示し、どの状態をURLや履歴に反映するかを考える必要があります。DOMは表示、BOMはナビゲーションやブラウザ状態、アプリケーション状態はその両者をつなぐものとして整理すると、設計が分かりやすくなります。

17. よくある誤解

DOMとBOMには、いくつかの誤解があります。特に、「DOMとBOMは同じもの」「windowとdocumentは同じもの」「JavaScriptの機能とブラウザAPIはすべて同じもの」と考えてしまうと、理解が曖昧になります。実際には、DOM、BOM、JavaScript言語仕様、ブラウザAPIは関係しながらも役割が異なります。

これらの違いを理解すると、フロントエンド開発の全体像が明確になります。JavaScriptは言語であり、DOMやBOMはブラウザが提供するAPIです。JavaScriptはそれらのAPIを利用して、ページやブラウザを操作します。この整理ができると、学習や実務で混乱しにくくなります。

17.1 DOMとBOMは同じではない

DOMとBOMは同じではありません。DOMはHTML文書を操作するための仕組みであり、BOMはブラウザ機能を操作するための仕組みです。どちらもJavaScriptから利用できるため似て見えますが、操作対象が異なります。

たとえば、document.querySelectorはDOM操作であり、window.location.hrefはBOM操作です。ページ内の要素を扱っているのか、ブラウザ環境を扱っているのかを意識すれば、違いを理解しやすくなります。

17.2 windowはBOMの中心

windowは、BOMの中心となるオブジェクトです。ブラウザのウィンドウ全体を表し、その中にdocument、location、history、navigatorなどがあります。JavaScriptのグローバルな実行環境とも関係しており、ブラウザ上のJavaScriptでは非常に重要な存在です。

ただし、windowに何でも依存する設計は注意が必要です。グローバル変数の増加やwindowへの直接依存は、テストや保守を難しくする場合があります。windowは便利ですが、実務では必要な機能だけを適切に利用することが大切です。

17.3 documentはDOMの入口

documentは、DOMの入口となるオブジェクトです。HTML文書全体を表し、要素取得、要素作成、イベント登録などの多くのDOM操作がdocumentを通じて行われます。document.querySelectorやdocument.createElementは、DOM操作の代表的なAPIです。

documentはwindowの中に存在しますが、役割はWebページ文書の操作に特化しています。windowがブラウザ全体を表すのに対し、documentは現在表示されているページの内容を表します。この違いを理解すると、DOMとBOMの関係が整理しやすくなります。

おわりに

DOMは、WebページのHTML構造をJavaScriptから操作するための仕組みです。Document Object Modelの略で、HTML文書をツリー構造のオブジェクトとして表現します。DOMを使うことで、要素を取得し、テキストを変更し、属性を操作し、スタイルを切り替え、要素を追加・削除できます。つまり、DOMはUIを構築・更新するための基礎です。

BOMは、ブラウザそのものに関する機能をJavaScriptから扱うための仕組みです。Browser Object Modelの略として使われることが多く、window、location、history、navigator、screenなどが代表的なオブジェクトです。BOMを使うことで、URL操作、履歴操作、ブラウザ情報取得、画面サイズ取得、リダイレクトなどが可能になります。

DOMとBOMの違いは、操作対象にあります。DOMはページの中身を扱い、BOMはブラウザ環境を扱います。見出しやボタン、フォーム、リストなどを変更するならDOM、URLや履歴、ブラウザ情報を操作するならBOMです。この違いを理解すると、JavaScriptがWebページとブラウザをどのように制御しているのかが分かりやすくなります。

実務では、DOMとBOMは連携して使われます。たとえば、URLのクエリパラメータをBOMで取得し、その値に応じてDOMを更新する処理があります。SPAではhistory APIによってURLを変更し、DOMを更新して画面を切り替えます。ReactやVueなどのフレームワークも、DOM更新やBOM操作を内部で扱いやすく抽象化しています。

DOMとBOMの理解は、フロントエンド開発の基礎として非常に重要です。DOMを理解すればUI操作の仕組みが分かり、BOMを理解すればブラウザ制御やナビゲーションの仕組みが分かります。JavaScriptを本質的に理解し、安定したWebアプリケーションを開発するためには、この2つの違いと関係性をしっかり押さえておくことが大切です。