Do you think IIT Guwahati certified course can help you in your career?
No
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!
As we mentioned earlier, BOM allows Javascriptto 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:
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 thebackbutton on the browser.