JavaScript BOM

Juhi Sinha
Last Updated: May 13, 2022

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!

 

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.

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

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 MethodMethod 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 PropertyDescription
widthThis method returns the width of the screen.
heightThis method returns the height of the screen.
availWidthThis method returns the available width of the screen.
availHeightThis method returns the available height of the screen.
colorDepthThis method returns the color depth.
pixelDepthThis 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 MethodDescription
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 PropertyDescription
appNameThis method returns the name of the application.
appVersionThis method returns the version of the application.
languageThis method returns languages that are supported by Firefox and Netscape browsers.
appCodeNameThis method returns the name of the code.
cookieEnabledThis method returns whether the cookies are enabled or not.
userAgentThis method returns the details of the user agent.
userLanguageThis method returns the user language that is supported by the Internet Explorer browser.
systemLanguageThis method returns the system language that is supported by the Internet Explorer browser.
pluginsThis method returns the plugins that are compatible with the Netscape and Firefox browsers.
platformThis method returns the windows platform
onlineIt 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:

MethodsDescription
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.

 

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.

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!

 

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think