Browser Objects-tutorial
In JavaScript, BOM stands for Browser Object Model.
The BOM is a set of built-in browser objects that allow developers to interact with and control the browser itself beyond just the HTML content.
With the BOM, you can
Example: Opening a new browser window
You can use the BOM to open a new browser window.
With the BOM, you can
- Open and close browser windows
- Navigate to different URLs
- Access browser history
- Get screen and browser information
- And much more
Example: Opening a new browser window
You can use the BOM to open a new browser window.
// Open a new window with Googlevar newWindow = window.open("https://www.google.com", "Google", "width=800,height=600");Key Objects and Features of the BOM
Window Object
Window Object
- Represents the entire browser window or tab.
- Acts as the global object in the browser.
- All BOM objects are children of the window object.
- Example:
console.log(window.innerWidth); // Outputs the width of the browser windowLocation Object
2. location.hostname – domain name
3. location.pathname – path after the domain
- Contains information about the current page URL.
- Allows navigation to other URLs.
- Common properties:
2. location.hostname – domain name
3. location.pathname – path after the domain
- Example:
console.log(location.href); // Shows current page URLHistory Object
Navigator Object
- Lets you interact with the browser’s session history.
- You can navigate back and forth
history.back(); // Go to previous pagehistory.forward(); // Go to next pageNavigator Object
- Provides information about the browser and the user's operating system.
- Example:
console.log(navigator.userAgent); // Shows browser user agent stringScreen Object
- Gives details about the user's screen (like width and height).
- Example:
console.log(screen.width); // Screen width in pixels