JavaScript

Browser Object Model (BOM) | Explained

Browser Object Model aka BOM is an object model that JavaScript uses to communicate with the browser. BOM can be thought of as a container of objects that uncover the functionalities of a web browser.

When a browser accesses a document it generates an object referred to as Document Object that contains all the relevant information about the document and how it should appear on the browser. Apart from the document object, a browser utilizes a huge amount of objects and this huge collection of objects is referred to as Browser Object Model (BOM).

This model does not follow any specific set of standards but is implemented by almost all browsers. Significant objects that are a part of the Browser Object Model (BOM) are;

  1. Document 
  2. History
  3. Screen
  4. Navigator
  5. Location
  6. Frames

Browser objects are ranked in a certain order that BOM utilizes to uncover functionalities of a web browser. Window Object that denotes the window of the browser, is the umbrella object of BOM, and the  rest of the objects fall under the window object. Here the window object has been explained in detail.

Window Object

A window object denotes the window of the browser and consists of all other browser objects. All browsers support the window object. The window object specifies some properties and methods that handle the functionalities of the web browser.

The window object is a global object that consists of global JavaScript objects, variables (properties of the window object), and functions (methods of the window object). Some of the window object methods are.

alert()

It is used to display an alert box with an OK button on the window screen.

window.alert()

confirm()

It is used to display a confirmation box with an OK and CANCEL button on the window screen.

window.confirm()

prompt()

It is used to display a dialog box that is meant to take input from the user.

window.prompt()

open()

It is used to open a new window.

window.open()

close()

It is used to close a window.

window.close()

setTimeout()

It is used to perform certain actions after a specific time.

window.setTimeout()

Now that we have a good understanding of the window object, let’s learn about some other important BOM objects.

Document Object

Document object that is a core part of Browser Object Model (BOM) includes all elements of a web page such as HTML tags. This object is used to denote a web page that has been opened in the browser, moreover, it is a property of the window object.

Syntax

The syntax of document object is given below.

window.document

Or,

document

Example

<!DOCTYPE html>

<html>

<body>

 

<p id="tutorial"></p>

 

<script>

let url = window.document.URL;

document.getElementById("tutorial").innerHTML = url;

</script>

 

</body>

</html>

Output

History Object

The history object denotes the web browsing history of a user in the form of arrays consisting of the URLs that the user visited. This object is used to load web pages.

Syntax

The syntax of the history object is as follows.

window.history

Or,

history

Like the window object, the history object also contains certain properties and methods that are discussed below.

Properties

The JavaScript history object consists only of one property which is as follows.

length

The length property of the history object is used for the purpose of returning the length of the visited URLs.

history.length

Methods

The JavaScript history object consists of the following methods.

forward()

It is used for the purpose of loading the next page.  It has the following syntax.

history.forward()

back()

It is used for the purpose of loading the previous page. It has the following syntax.

history.back()

go()

It is used for the purpose of loading a page using the page number. It has the following syntax.

history.go()

Screen Object

The screen object contains all relevant information regarding the browser screen such as height, width, colorDepth, availHeight, etc.

Syntax

The syntax of the screen object is given below.

window.screen

Or,

screen

The screen object consists of some properties which are explained below.

Properties

Properties of the screen object are as follows.

width

It is used for fetching the screen width.

screen.width

height

It is used for the purpose of fetch the screen height.

screen.height

availWidth

It is used for the purpose of fetching the current width.

screen.availWidth

availHeight

It is used for the purpose of returning the current height.

screen.availHeight

colorDepth

It is used for the purpose of displaying the depth of the color.

screen.colorDepth

pixelDepth

It is used for the purpose of displaying the depth of the pixel.

screen.pixelDepth

Location Object

The location object consists of the relevant information about the available URL and like document, history, and screen objects, it is also a property of the window object.

Syntax

The syntax of the location object is provided here.

window.location

Or,

location

Properties

Location object properties are highlight below

hash

It is used for the purpose of returning or setting the anchor of the URL.

location.hash

host

It is used for the purpose of fetching the hostname as well as the port number of the URL.

location.host

hostname

It is used for the purpose of fetching the hostname of the URL.

location.hostname

href

It is used for the purpose of returning or setting the complete URL.

location.href

origin

It is used for the purpose of fetching the hostname, and the port number, and also the protocol of the URL.

location.origin

pathname

It is used for the purpose of returning or setting the pathname of the URL.

location.pathname

port

It is used for the purpose of returning or setting the port number of the URL.

location.port

protocol

It is used for the purpose of returning or setting the protocol of the URL.

location.protocol

search

It is used for the purpose of returning or setting the querystring of the URL.

location.search

Methods

The location object has the following set of methods.

assign()

It is used for the purpose of loading a new document.

location.assign()

reload()

It is used for the purpose of reloading the document at hand.

location.reload()

replace()

It is used for the purpose of replacing the present document with a new document.

location.replace()

Conclusion

Browser Object Model aka BOM is an object model that JavaScript uses to communicate with the browser and is regarded as a container of objects that uncover the functionalities of a web browser. BOM  does not follow any specific set of standards but is implemented by almost all browsers. Significant BOM objects along with the properties and methods that these objects comprise of are explained in depth in this write-up.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.