The Browser Object Model (BOM) is a collection of objects provided by the web browser that allows you to interact with the browser itself. BOM is not part of the official JavaScript specification but is supported by all major browsers. It provides methods and properties to interact with the browser window, manipulate the browser history, access screen information, and more.
The primary object in the BOM is the window object, which represents the browser window. All other BOM objects are properties of the window object, so you can either use them directly or with the window prefix.
The global object representing the browser window. You can call its functions with or without specifying window.
window.alert("Hello, BOM!"); // same as alert("Hello, BOM!");
Represents the HTML document loaded in the window. It's part of the Document Object Model (DOM), but accessible through the BOM.
console.log(window.document.title); // Outputs the title of the current document
Provides access to the browser's session history. Allows you to navigate back and forth through the user's history.
window.history.back(); // Goes back to the previous page
window.history.forward(); // Goes forward to the next page
Provides information about the user's screen, such as its width and height.
console.log(window.screen.width); // Outputs the width of the screen
console.log(window.screen.height); // Outputs the height of the screen
Contains information about the browser and the operating system. Useful for detecting the browser type and version.
console.log(window.navigator.userAgent); // Outputs the user agent string
console.log(window.navigator.language); // Outputs the browser's language
Provides information about the current URL and allows you to redirect the browser to a new URL.
console.log(window.location.href); // Outputs the current URL
window.location.href = "https://www.example.com"; // Redirects to example.com
Represents the inner height and width of the browser window's content area (excluding toolbars and scrollbars).
console.log(window.innerHeight); // Outputs the inner height of the window
console.log(window.innerWidth); // Outputs the inner width of the window