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.
 
10.1.
Frequently Asked QuestionsWhat is BOM in JavaScript?
10.2.
What is the use of a BOM file?
10.3.
What is the hierarchy of BOM in JavaScript?
11.
Key Takeaways
Last Updated: Sep 7, 2024

JavaScript BOM

Author Juhi Sinha
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

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?

JavaScript BOM

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.

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
What is BOM in JavaScript?

The Browser Object Model (BOM) in JavaScript allows interaction with the browser, including manipulating windows, screen, and location objects.

What is the use of a BOM file?

A BOM file, or Byte Order Mark file, is used to indicate the encoding of text files, such as UTF-8, UTF-16, or UTF-32.

What is the hierarchy of BOM in JavaScript?

The hierarchy of BOM in JavaScript starts with the Window object at the top, followed by objects like Document, History, Screen, and Location.

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.

Live masterclass