Browser Object Model

The Browser Object Model (BOM) is a collection of JavaScript objects provided by web browsers that allow developers to interact with and manipulate various aspects of the browser window and the user's environment. Unlike the Document Object Model (DOM), which deals with the structure and content of the web page, the BOM focuses on the browser itself. The BOM provides objects and methods to control browser features such as windows, frames, history, location, and more.

Some common objects and properties in the Browser Object Model include:

  1. window: Represents the browser window and serves as the global object in client-side JavaScript.
  2. document: Represents the web page being displayed and provides access to its content through the DOM.
  3. navigator: Contains information about the user's browser and operating system.
  4. location: Represents the URL of the current web page and provides methods to manipulate it.
  5. history: Represents the user's browsing history and allows navigation back and forth.
  6. screen: Provides information about the user's screen dimensions and resolution.

Global Object

The browser's window is indeed represented by a global object known as the window object. The window object is a fundamental component of web browsers and is consistently supported by major browsers. It encapsulates various global JavaScript objects, and any function, object, or variable declared in JavaScript becomes inherently associated with the window object. This design effectively makes these elements accessible as members of the Window object, providing a unified and accessible environment for managing and interacting with browser-related functionalities. Few examples of window object properties and methods as follows:"", newWindow, "width=500, height=500"); window.frames[0].location = ""; window.close(); var winWidth = window.innerwidth; var winHeight = window.innerHeight; window1.moveTo(500, 300); window1.focus();

Document element

The Document element, serving as the root of DOM elements, is an integral component within the Browser Object Model (BOM) hierarchy. This Document object symbolizes the web page that is presented in the browser. All constituents of a web page, encompassing HTML tags, reside within this Document object. Due to its major importance within the BOM, it possesses a distinct object model referred to as the Document Object Model (DOM).

Unlike the standardized and well-defined Document Object Model, the BOM lacks a uniform implementation or strict specification, affording browser vendors the freedom to implement it according to their preferences. Additionally, all global JavaScript objects, functions, and variables inherently align with the Window object, forming part of its membership. Notably, JavaScript often permits the omission of the window reference when accessing numerous elements, contributing to a more concise syntax. Examples of Global objects as follows:

window.document.getElementById("Para1"); document.getElementById("Para1");

The example shown in the above two statements means the same.

BOM example
<!DOCTYPE html> <html> <head> <title>BOM Examples</title> <script> var browserInfo = window.navigator.appName + " " + window.navigator.appVersion; document.write("<h2>Browser Info</h2><p>"+browserInfo +"</p>"); var newWindow; function opennewWindow() { newWindow ="", "", "width=500, height=300, top=150, left=150"); newWindow.document.title = "New Window"; paraGraph = document.createElement("P"); paraGraph_text = document.createTextNode("New Paragraph"); paraGraph.appendChild(paraGraph_text); newWindow.document.body.appendChild(paraGraph); } function closenewWindow() { if (newWindow != undefined) { newWindow.close(); newWindow = undefined; } else { alert("Nothing to open !!"); } } </script> </head> <body> <h2>BOM Window Object</h2> <p> <input type="button" value="Open Window" onclick="opennewWindow()" /> <input type="button" value="Close Window" onclick="closenewWindow()" /> </p> </body> </html>

Developers can use the BOM to perform tasks such as opening new browser windows, redirecting to different URLs, manipulating the browser's history, displaying alerts and prompts, and interacting with the user's device and environment.


It's important to note that the BOM is not standardized by any official specification like the DOM is. This means that different browsers may provide slightly different BOM features and methods, leading to inconsistencies in behavior across browsers.