導入
ウェブ開発において、ブラウザオブジェクトモデル（BOM）とドキュメントオブジェクトモデル（DOM）を理解することは、ウェブページを効果的に操作し、インタラクションを行う上で不可欠です。BOMとDOMは、ウェブブラウザにおけるJavaScript環境の重要な構成要素です。この記事では、BOMとDOMの詳細を解説し、それぞれの違い、機能、そして具体的なシナリオを取り上げます。この記事を最後まで読めば、これら2つのモデルとウェブ開発における役割について、包括的な理解が得られるでしょう。.
ブラウザ オブジェクト モデル (BOM)
BOMは、JavaScriptがブラウザウィンドウとその要素とやり取りできるようにするブラウザ固有のオブジェクトとインターフェースを表します。BOMは様々なプロパティ、メソッド、イベントへのアクセスを提供し、開発者がブラウザの動作を制御したり、ウィンドウを管理したり、Cookieを管理したり、URLを操作したりすることを可能にします。.
主なBOMコンポーネント:
ウィンドウオブジェクト:
- BOM 内のグローバル オブジェクトはブラウザー ウィンドウを表し、ブラウザー関連の機能へのアクセスを提供します。.
ナビゲーターオブジェクト:
- ブラウザの名前、バージョン、プラットフォーム、機能に関する情報を提供します。.
場所オブジェクト:
- 現在の Web ページの URL を表し、URL の操作を可能にします。.
ドキュメントオブジェクト:
HTML ドキュメント全体を表示し、そのコンテンツを操作するためのメソッドを提供します。.
BOM を使用する実際のシナリオ:
Windows 管理:
// Open a new browser window
const newWindow = window.open("https://www.example.com", "_blank");
// Close the current window
window.close();URL操作:
// Redirect the user to a different URL
window.location.href = "https://www.example.com";
// Get the current URL and display it
const currentUrl = window.location.href;
console.log(currentUrl);クッキーの取り扱い:
// Create a cookie
document.cookie = "username=John Doe";
// Read a cookie
const username = document.cookie.split(";")[0].split("=")[1];
console.log(username);
// Delete a cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";ドキュメントオブジェクトモデル（DOM）
DOMは、HTMLまたはXML文書の構造をツリー構造として表現する、プラットフォームに依存しないプログラミングインターフェースです。JavaScriptはDOMを使用することで、コンテンツの変更、要素の追加や削除、イベントの処理など、ドキュメント要素の操作や対話を行うことができます。.
主要なDOMコンポーネント:
ドキュメントオブジェクト:
- これはドキュメント ツリーのルートを表し、要素にアクセスして操作するためのメソッドを提供します。.
要素オブジェクト:
- HTML 要素を表し、その属性、スタイル、コンテンツを操作するためのメソッドを提供します。.
ノードオブジェクト:
- 要素、テキスト、コメントなど、ドキュメント内のさまざまな種類のノードを表します。.
DOM を使用する実用的なシナリオ:
コンテンツの変更:
// Change the text of a paragraph element
const paragraph = document.getElementById("myParagraph");
paragraph.textContent = "Updated text";
// Update an element's attribute
const link = document.querySelector("a");
link.setAttribute("href", "https://www.example.com");操作要素:
// Create a new element and append it to the document
const newElement = document.createElement("div");
newElement.textContent = "New Element";
document.body.appendChild(newElement);
// Remove an element from the document
const elementToRemove = document.getElementById("myElement");
elementToRemove.parentNode.removeChild(elementToRemove);イベントの処理:
// Add an event listener to a button
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log("Button clicked");
});
// Handle form submission event
const form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
event.preventDefault();
console.log("Form submitted");
});BOMとDOMの比較と対比
BOMとDOMの関係:
- BOM と DOM はどちらも、Web ブラウザーの JavaScript 環境の一部です。.
- BOM は特定のブラウザ機能へのアクセスを提供し、ブラウザ ウィンドウを制御します。.
- DOM は HTML または XML ドキュメントの構造を表し、その要素の操作を可能にします。.
BOM と DOM の主な違い:
範囲：
- BOM はウィンドウ レベルで動作しますが、DOM はドキュメントとその要素内で動作します。.
機能性:
- BOM は、ウィンドウ管理、Cookie、URL などのブラウザ関連の機能に重点を置いています。.
- DOM は、ドキュメントの構造とコンテンツを操作および対話することに関係しています。.
BOM と DOM を比較した実際の例:
BOM を使用してウィンドウのプロパティにアクセスする:
// Get the width and height of the browser window
const windowWidth = window.innerWidth || document.documentElement.clientWidth;
const windowHeight = window.innerHeight || document.documentElement.clientHeight;
console.log(`Window dimensions: ${windowWidth} x ${windowHeight}`);
// Scroll to a specific position
window.scrollTo(0, 0);DOM を使用して DOM 要素を操作する:
// Change the background color of an element
const element = document.getElementById("myElement");
element.style.backgroundColor = "blue";
// Create a new element and append it to the document
const newElement = document.createElement("div");
newElement.textContent = "New Element";
document.body.appendChild(newElement);結果
ブラウザオブジェクトモデル（BOM）とドキュメントオブジェクトモデル（DOM）を理解することは、Webページを効果的に操作し、インタラクションを行う上で不可欠です。BOMはブラウザ固有の機能へのアクセスを提供し、ブラウザウィンドウ、Cookie、URLの制御を可能にします。一方、DOMはドキュメント要素の操作とインタラクションを容易にし、動的なコンテンツの更新とイベント処理を可能にします。BOMとDOMの機能を活用することで、開発者は動的でインタラクティブなWebアプリケーションを作成できます。ウィンドウの管理、URLの操作、Cookieの管理、コンテンツの変更、イベントとのインタラクションなど、BOMとDOMはJavaScriptによるWebインタラクションを向上させるために必要なツールを提供します。.
