JavaScript - Browser Object Model
Last Updated : 19 Feb, 2025
The Browser Object Model (BOM) in JavaScript enables developers to interact with the browser beyond just the webpage content, offering control over essential features such as the browser window, URL (location), and browsing history.
Browser Object Model in JavaScript
The Browser Object Model (BOM) in JavaScript helps to interact with the browser, not just the webpage. While the DOM handles the content of the page, BOM gives you control over things like the browser window, the URL, and the history. This means you can do things like resize the window, go back and forth in the browser history, or even find out what browser the user is using. In short, BOM helps JavaScript work with the browser to make web pages more interactive.
Browser Object Model Types
Here are the main parts of the Browser Object Model (BOM)
| Object | Description |
|---|
window | Represents the browser window, controlling aspects like size and location, and serves as the global object. |
navigator | Provides details about the user's browser and operating system. |
location | Manages the current URL, allowing for retrieval and modification of the web address. |
screen | Offers information about the user's screen, such as its width and height. |
history | Provides access to the browser's session history, enabling navigation through the user's browsing history. |
Let's see each part of the Browser Object Model in more detail.
1. Window Object
The window object is the main object in the BOM, representing the browser window or tab itself. It's the top-level object, and everything else in the browser is contained within it.
JavaScript window.alert('Hello, World!'); console.log(window.innerWidth); - The window object provides methods like alert(), confirm(), and prompt().
- It also gives you access to other important objects, such as document, navigator, screen, location, and history.
Window Object2. Navigator Object
The navigator object provides information about the browser and the user's environment. It is often used to detect the browser type or features.
JavaScript console.log(navigator.userAgent); console.log(navigator.language);
- navigator.userAgent can be used to identify the browser and its version, but it's not always reliable.
- navigator.language tells you the user's preferred language.
Navigator Object3. Location Object
The location object allows you to interact with the URL of the current document. It can be used to retrieve or manipulate parts of the URL and navigate to different pages.
JavaScript console.log(location.href); location.href = 'https://www.google.com'
- location.href gives you the full URL.
- You can change location.href to load a different page.
Location Objectlocation object Properties
- location.href: Returns the full URL of the current page, including the protocol, domain, path, and query string.
- location.protocol: Returns the protocol part of the URL (e.g., https: or http:).
- location.hostname: Returns the domain name or IP address of the URL (e.g., www.example.com).
- location.pathname: Returns the path part of the URL after the domain (e.g., /path/to/page).
4. Screen Object
The screen object provides information about the user’s screen, such as its resolution.
JavaScript console.log(screen.width); console.log(screen.height);
- screen.width and screen.height give you the screen's dimensions.
- This can be useful for adapting your website's layout to different screen sizes.
Screen Object5. History Object
The history object allows you to navigate through the browser's session history. It provides methods to move forward, backward, or to specific pages in the history stack.To see the working of history object you can run this code on the browser.
JavaScript history.back(); history.forward();
- history.back() goes back one page.
- history.forward() goes forward one page.
6. Using window.resizeTo
The window.resizeTo() method is used to resize the browser window to a specific width and height. This can be useful for controlling window dimensions in a web application.
JavaScript let newWindow = window.open("https://www.example.com", "NewWindow", "width=500,height=500"); newWindow.resizeTo(300, 300); Output
Using window.resizeTo- window.open("https://www.example.com", "NewWindow", "width=500,height=500") opens a new browser window with the URL https://www.example.com. The window is named "NewWindow", and its size is set to 500px by 500px.
- newWindow.resizeTo(300, 300) resizes the newly opened window to 300px by 300px. This resizing happens after the window is opened.
Key Features of the BOM
- Dynamic Browser Control: The BOM allows developers to control browser windows and perform operations like resizing, opening, and closing windows.
- URL Manipulation: Through the location object, developers can retrieve, modify, and navigate URLs dynamically.
- Browser and Device Information: The navigator object provides details about the user's browser, operating system, and hardware capabilities.
- Screen and Resolution Access: Developers can access screen properties like width, height, and pixel depth for responsive design.
- Session History Navigation: The history object enables smooth navigation through the user's browsing history.
- Cookie Management: Using the document.cookie property, developers can set, retrieve, and delete cookies for session management.
- Event Handling and Timers: Functions like setTimeout and setInterval allow scheduling and periodic execution of tasks.s the current web address (URL) and allows changes within the Browser Object Model (BOM).
Conclusion
The Browser Object Model is an essential part of JavaScript programming for web applications. It provides powerful tools for interacting with the browser environment, enabling developers to create dynamic, feature-rich web applications. By understanding and leveraging the BOM, you can enhance the functionality of your websites and deliver a better user experience.
Similar Reads
JavaScript Object create() Method
JavaScript object.create() method is used to create a new object with the specified prototype object and properties. Object.create() method returns a new object with the specified prototype object and properties. Syntax:Object.create(prototype[, propertiesObject])Parameters:prototype: It is the prot
3 min read
JavaScript Object defineProperties() Method
The Object.defineProperties() method in JavaScript is a standard built-in Object that defines a new or modifies existing properties directly on an object and it returns the object. Syntax:Object.defineProperties(obj, props) Parameters:Obj: This parameter holds the object on which the properties are
2 min read
JavaScript Objects
In our previous article on Introduction to Object Oriented Programming in JavaScript we have seen all the common OOP terminology and got to know how they do or don't exist in JavaScript. In this article, objects are discussed in detail. Creating Objects: In JavaScript, Objects can be created using t
6 min read
Objects in Javascript
An object in JavaScript is a data structure used to store related data collections. It stores data as key-value pairs, where each key is a unique identifier for the associated value. Objects are dynamic, which means the properties can be added, modified, or deleted at runtime. There are two primary
4 min read
JavaScript Object Constructors
An object is the collection of related data or functionality in the form of key. These functionalities usually consist of several functions and variables. All JavaScript values are objects except primitives. const GFG = { subject : "programming", language : "JavaScript",}Here, subject and language a
4 min read
JavaScript Object Accessors
There are two keywords that define the accessors functions: a getter and a setter for the fullName property. When the property is accessed, the return value from the getter is used. When a value is set, the setter is called and passed the value that was set. JavaScript Getter (The get Keyword)Exampl
2 min read
JavaScript Display Objects
JavaScript Display Objects refer to manipulating and rendering HTML elements on web pages dynamically using DOM (Document Object Model) methods to show, hide, modify, or update content interactively. Below are the methods to perform Javascript display object property: Table of Content Displaying the
2 min read
JavaScript Object initializer
Objects in JavaScript can be compared to real-life objects. They have properties and methods attached to them and properties are in the form of key-value pairs. Let us understand this with an example. In the real world, a motorcycle is an object and it has properties like name, color, price, etc. It
3 min read
Creating objects in JavaScript
An object in JavaScript is a collection of key-value pairs, where keys are strings (properties) and values can be any data type. Objects can be created using object literals, constructors, or classes. Properties are defined with key-value pairs, and methods are functions defined within the object, e
5 min read
JavaScript | A medicine to every problem
In the world full of different languages it is quite confusing knowing that what to choose and what not to. Most of the times students want to start something but when they search they have a lot of options and a lot of technologies in the market. It is good to have options but sometimes a lot of op
4 min read