Browser Object Model in JavaScript

img
JavaScript is a scripting language which is run on the browsers.
Without the web browsers, there will be no use of writing JavaScript.
A complete web page is made up of HTML tags and it is made dynamic using JavaScript.
JavaScript process the instructions or routines to setup the properties of HTML tags, and then activates their property methods to make the page dynamic.

BOM (Browser Object Model) is the hierarchy of browser objects.
Their main purpose is to manipulate the properties and methods which are associated with the web browser.
BOM objects include navigator object, location object, window object, screen object, document object, and history.
The web page which is currently loaded in web browser window is represented by the Document Object.

Every HTML tag or the element which helps in making up the document also classifies as an object. All the objects get created automatically as soon as a web page is opened in a web browser.
Therefore, it is not required to explicitly create the objects for making up the BOM.

Browser Object Model Hierarchy

Window Object

The window object is the top most object present in the BOM.
It represents the window which is open in the browser at that time.
The Window object contains all the other objects in it.
It has a lot of methods and properties associated with it which helps in controlling the web browser.

Document Object

The web pages shown in the web browser are represented by the Document Object.
It contains all the tags & elements present on the web page including the HTML elements. It is the most important part if the Browser Object Model.
It has its own object model as well which is known as DOM (Document Object Model).

Navigator Object

It is used for detecting the browser information like the appCodeName, userAgent, appName, appVersion, etc.
It is useful to create the JavaScript based upon the browser used by the user and what all has been enabled by the user for that browser.

History Object

It contains all the information related to the browser’s history. It provides a list of all the URL of the websites visited by the user. It is useful for loading any previous page as well as any particular page. It has 3 methods forward(), go(), and back().

Location Object

It provides information regarding the current URL opened on the web browser.
It is used to control the current web page displayed in the web browser.
It has properties like host, origin, port, pathname, search, etc.

Screen Object

It provides the information about the browser screen such as the height, width, pixelDepth, colorDepth, etc. It has properties associated with it like availWidth, availHeight, colorDepth, pixelDepth.

Conclusion

So these were some of the BOM objects.
Since there are more than hundreds of properties associated with the web page elements and dozens of methods, we need to decide which method and propertied are required at that time. We always don’t need to activate every method or set every property.
It depends upon the project’s needs and requirements.

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?