Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is BOM?
3.
Types of Browser Object Model
4.
Windows Object Model
5.
Screen Object Model
6.
History Object Model
7.
Navigator Object Model
8.
Location Object Model
9.
 
10.
 
11.
Frequently Asked QuestionsQ1) Which does BOM stand for?
12.
Key Takeaways
Last Updated: Mar 27, 2024

JavaScript BOM

Author Juhi Sinha
1 upvote
Roadmap to SDE career at Amazon
Speaker
Anubhav Sinha
SDE-2 @
25 Jun, 2024 @ 01:30 PM

Introduction

BOM is an acronym for Browser Object Model. And when we say browser, we're referring to a window in any browser, such as Firefox, Chrome, or Internet Explorer. 

Till now, you’ve heard about DOM, the document object model of JavaScript. Which is used to represent the content of a document on the web. But, BOM and DOM are two different things. Let’s see how?

The Browser Object Model (BOM) enables JavaScript to communicate with the browser about things other than the page's content.

In this article, we are going to learn the BOM in JavaScript. So, without any further ado, let's get started!

Also Read, Javascript hasOwnProperty

What is BOM?

As we mentioned earlier, BOM allows Javascript to talk to the browser about matters other than the content of the page. The matter includes Navigator, History, Screen, etc.

The Browser Object Model is a browser-specific convention that refers to all web browser objects.The Browser Object Model allows manipulation and access of the browser window. 

As there is no standard for BOM, different browsers implement it differently. Developers can use the BOM to move the window, change the text in the status bar, and do other things that aren't directly related to the page content.

 

The figure below shows the relation between DOM and BOM.

 

Now, let’s see the various types of Browser Object Model.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Types of Browser Object Model

The Browser Object Model that can be used in JavaScript are listed below:

  • Windows Object Model
  • Screen Object Model
  • History Object Model
  • Navigator Object Model
  • Location Object Model
    Learn more about the Fibonacci Series in Java in detail.

Windows Object Model

The Windows Object Model facilitates the browser windows object to display messages similar to the alert messages of JavaScript.

Different methods of Windows Object Model are:

Windows Object Method Method Description
alert() The alert box message is displayed with the OK button in the Windows method.
confirm() The confirm dialog box message is displayed in the Windows method with the OK and Cancel buttons.
close() Closes the current window using the Windows method.
open() The Windows method opens a new window.
prompt() It asks the user to type in some text. A dialogue box for user input is displayed by the Windows method.
setTimeout() After a certain time, a Windows method performs actions such as calling functions, evaluating expressions, etc.
setInterval() It repeatedly calls a callback function with a fixed delay between each call.

The above table describes the windows object methods.

Screen Object Model

The Screen Object Model allows us to retrieve browser data like screen width, height, color depth, pixel depth, etc.

The properties of the Screen Object Model are listed below:

Screen Object Property Description
width This method returns the width of the screen.
height This method returns the height of the screen.
availWidth This method returns the available width of the screen.
availHeight This method returns the available height of the screen.
colorDepth This method returns the color depth.
pixelDepth This method returns the pixel depth.

The above table describes the screen object property.

History Object Model

The History Object Model returns an array of URLs that the user has visited in their browser history.

The methods for the history object model are listed below: 

History Object Method Description
forward() This method loads the next page.
go() This method loads a page with the specified page number.
back() This method loads the previous page.

 

Navigator Object Model

The Navigator Object Model allows us to retrieve browser information such as the application name, cookie information, version, user language, user agent information, etc.

The properties of the Navigator Object Model are listed below:

Navigator Object Property Description
appName This method returns the name of the application.
appVersion This method returns the version of the application.
language This method returns languages that are supported by Firefox and Netscape browsers.
appCodeName This method returns the name of the code.
cookieEnabled This method returns whether the cookies are enabled or not.
userAgent This method returns the details of the user agent.
userLanguage This method returns the user language that is supported by the Internet Explorer browser.
systemLanguage This method returns the system language that is supported by the Internet Explorer browser.
plugins This method returns the plugins that are compatible with the Netscape and Firefox browsers.
platform This method returns the windows platform
online It informs whether the browser is online or not.

 

Location Object Model

In JavaScript, the Location object window allows us to save information about the current page's location(URL). It redirects the browser to a different new page. Although there is no universal standard for the location object, it is supported by all major browsers.

The methods of location objects in JavaScript are listed in the table below:

Methods Description
assign() This method loads a new web page document.
reload() Reload the current document using the location.href property.
replace() The current document is replaced with the new specified document. It is not possible to return to a previous document using the back button on the browser.

 

 


 

Practice it on an online javascript editor.

 

Frequently Asked Questions
Q1) Which does BOM stand for?

Answer: BOM stands for Browser Object Model.


Q2) What does BOM do in JavaScript?

Answer: The BOM allows JavaScript to interact with the browser. The window object represents a browser window and all of its associated features. The browser creates a window object for us.


Q3) Which object in BOM is the top object?

Answer: The window object is the highest level object in the BOM. The window object represents the browser window. The window object is the container for all other browser objects. A number of properties and methods in the window object can be used to control the web browser.


Q4) In JavaScript, are BOM and DOM the same thing?

Answer: BOM can be considered a superset of DOM. There are a lot of objects, methods, and properties in BOM that aren't in the DOM structure.

Refer to know about:   jquery ajax

Key Takeaways

In this article, we've learned about JavaScript BOM and its different object models in detail.

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here

Thank you for reading!

 

 

Next article
JavaScript Window
Live masterclass