JavaScript Browser Object Model

JavaScript provides WebAPIs and Interfaces(object types) that we can use while developing web application or website. These APIs and objects help us in controlling the lifecycle of the webpage and performing various actions like getting browser information, managing screen size, opening and closing new browser window, getting URL information or updating URL, getting cookies and local storage, etc.

There is so much that you can do using these WebAPIs and Interfaces. All the supported Web APIs and Interfaces in JavaScript are listed on the Mozilla Developer website.

The Iterfaces (object types) which help us interact with the browser window are known as Browser objects. Browser object is not an official term but its a group of objects which belongs to different WebAPIs but are used for managing various browser related information and actions.

For example, when an HTML document is opened in a browser window, the browser interprets the document as a collection of hierarchical objects(HTML tags) and accordingly displays the data contained in these objects(HTML page rendering). The browser parses the document and creates a collection of objects, which defines the documents and its details. We have shown the various objects that can be used to access various components of the browser window in the picture below:

The browser objects are of various types, used for interacting with the browser and belongs to different APIs. The collection of these Browser objects is also known as Browser object Model(BOM).

The default object of browser is Window which means you can call its functions directly.

Browser Objects:

The objects listed below are called browser objects.

• Window - part of DOM API

• Navigator

• Document - part of DOM API

• Screen - property of Window object

• History - property of Window object

• Location - property of Window and Document object

Window Object

It is used to interact with the browser window which displays the web page. It generally represents a tab in browser, but some actions like window width and height will affect the complete browser window.

We have covered JavaScript Window Object separately, in detail.

Navigator Object

It acts as a storehouse of all the data and information about the Browser software used to access the webpage and this object is used to fetch information related to the browser for example, whether the user is using Chrome browser or Safari browser, which version of browser is being used etc.

We have covered JavaScript Navigator Object separately, in detail.

Document Object

This object represent the HTML document that is loaded into the browser. A document object is an object that provides access to all HTML elements of a document(webpage). We can use this object to append a new HTML tag to the webpage, modify any exsiting HTML tag, etc.

We have covered JavaScript Document Object separately, in detail.

History Object

It stores Uniform Resource Locator(URLs) visited by a user in the browser. It is a built-in object which is used to get browser history. This object is a property of the JavaScript Window object.

We have covered JavaScript History Object separately, in detail.

Screen Object

It is a built-in object which is used to fetch information related to the browser screen, like the screen size, etc. It is also obtained from the Window object.

We have covered JavaScript Screen Object separately, in detail.

Location Object

Location is a built-in object which represent the location of the object to which it is linked, which can be Window or Document. Both the Document and Window interface have a linked location property.

We have covered JavaScript Location Object separately, in detail.

From the next tutorial, we will cover all these objects, one by one, in detail, with examples to see how we can use them to interact with browser and perform various different actions.