The BOM (Browser Object Model)
The Browser Object Model (BOM) is a set of JavaScript objects provided by web browsers that allow you to interact with the browser itself and its features. While the Document Object Model (DOM) deals with the content and structure of a web page, the BOM deals with the browser window and its components. The BOM is not standardized like the DOM and can vary between browsers.
Key BOM Objects and Features:
window
Object: Represents the browser window and provides properties and methods to manipulate it.document
Object: Represents the current HTML document being displayed in the browser window.navigator
Object: Provides information about the user’s browser and operating system.location
Object: Represents the current URL of the browser window and provides methods to navigate to different URLs.history
Object: Represents the browser’s session history and allows you to navigate backward and forward.screen
Object: Represents the user’s screen and provides information about its size and resolution.setTimeout()
andsetInterval()
: Methods for executing code after a specified delay or at regular intervals.
Examples of BOM Usage:
Opening a New Browser Window: You can use the window.open()
method to open a new browser window with the specified URL and dimensions.
const newWindow = window.open("https://www.example.com", "_blank", "width=600,height=400");
Changing Browser Location:
You can use the window.location
object to change the current URL of the browser window.
window.location.href = "https://www.newurl.com";
Checking Browser Compatibility:
You can use the navigator.userAgent
property to determine the user’s browser and version.
if (navigator.userAgent.includes("Chrome")) {
console.log("You are using Google Chrome.");
}
Using Timers:
You can use setTimeout()
to execute code after a specified delay and setInterval()
to repeatedly execute code at intervals.
setTimeout(function() {
console.log("Delayed message after 2 seconds.");
}, 2000);
setInterval(function() {
console.log("Repeating message every 5 seconds.");
}, 5000);
Some Diagrams to depict the BOM
Examining the Browser Object Model (BOM)
Examining the Browser Object Model (BOM) involves using JavaScript to interact with and access various BOM objects and their properties. You can do this directly in your browser’s developer console. Here’s how you can examine the BOM using the developer console:
1. Open Developer Console:
In most browsers, you can open the developer console by pressing the F12
key or right-clicking on a web page and selecting “Inspect” or “Inspect Element.”
2. Access BOM Objects:
Once the developer console is open, you can start examining BOM objects by typing their names followed by a dot (.
). The console will then show you a list of properties and methods available for that object.
3. Examples:
To access the window
object, simply type window.
and you’ll see a list of properties and methods you can interact with. To examine the browser’s location, type window.location
and press Enter. You’ll see the properties of the location
object. Similarly, you can examine other BOM objects like document
, navigator
, history
, and more.
Here’s a quick example of examining the window
and navigator
objects in the developer console:
- Open a web page in your browser.
- Open the developer console (usually with
F12
or right-click and “Inspect”). - Type
window.
and press Enter. You’ll see a list of properties and methods associated with thewindow
object. - Type
window.location
and press Enter. You’ll see the properties of thelocation
object. - Type
navigator.
and press Enter. You’ll see a list of properties and methods associated with thenavigator
object.
You can also experiment by using various properties and methods provided by the BOM objects. This hands-on exploration will give you a better understanding of how the BOM works and how you can interact with it using JavaScript.
Finally, the following will work too:
Open the developer console to see BOM objects and their properties.
// Access the window object and log its properties
console.log("Window object:", window);
// Access the location object and log its properties
console.log("Location object:", window.location);
// Access the navigator object and log its properties
console.log("Navigator object:", navigator);
// Access the document object and log its properties
console.log("Document object:", document);
The Browser Object Model provides powerful tools to interact with the browser window and its features, enabling you to create dynamic and interactive web applications. Keep in mind that while the DOM is standardized, the BOM can have variations between different browsers, so it’s important to test your code in various browsers to ensure compatibility.