JavaScript - Browser Object Model

The Browser Object Model (BOM) in JavaScript refers to the objects provided by the browsers to interact with them. By using these objects, you can manipulate the browser’s functionality. For example, you can get the browser history and window size, navigate to different URLs, etc.

The Browser object model is not standardized. It depends on which browser you are using.

Here, we have listed all objects of the Browser Object Model with descriptions −

• Window− The ‘window’ object represents the current browser window. You can use it to manipulate the browser window.
• Document− The ‘document’ object represents the currently opened web page in the browser window. You can use it to customize the property of the document.
• Screen− It provides information about the user’s device’s screen.
• History− It provides the browser’s session history.
• Navigator− It is used to get the browser’s information like default language, etc.
• Location− The Location object is used to get the URL information, such as the hostname of the current web page.
• Console− The console object allows developers to access the browser’s console.

JavaScript Window Object

The JavaScriptwindowobject represents the browser’s window. We can use different methods and properties of the window object to manipulate current browser window. For example, showing an alert, opening a new window, closing the current window, etc.

All the JavaScriptglobal variablesare properties of window object. Allglobal functionsare methods of the window object.

The other objects listed above such as document, screen, history etc., are the properties of the window object. We can access these objects as properties of the window object. We can also access them with referencing the window object. Look at the below example snippet to access the document object

window.document.write("Welcome to Tutorials Point");

or without window object −

document.write("Welcome to Tutorials Point");

TheinnerHeightandinnerWidthproperties of the window object are used to access the height and width of the browser window. We will learn JavaScript window object in detail in next chapters.

JavaScript Document Object

Thedocument objectis a property of the JavaScript window object. The whole HTML document is represented as a document object. The document object forms HTML DOM. It is root node of the HTML document.

The document object can be accessed aswindow.documentor justdocument.

The document object provides us with many properties and methods to access the HTML elements and manipulate them. One such method is document.getElementById() to access the HTML element using its id.

We can access an element with id as “text” usinggetElementById()method and manipulate it

Example

Output

The text of this DIV is changed.

JavaScript Screen Object

In JavaScript, thescreenobject is a property of window object. It provides us with properties that can be used to get the information about the device window screen. We can access the screen object aswindow.screenor justscreen.

To get the width and height of the device screen in pixels we can use thescreen.widthandscreen.heightproperties

Example

Output

Width of the device screen is 1536 px.
Height of the device screen is 864 px.
The above result may be different for different device.

JavaScript History Object

In JavaScript, thehistoryobject is also a property of thewindowobject. It contains a list of the visited URLs in the current session. The history object provides an interface to manipulate the browser’s session history.

The JavaScript history object can be accessed usingwindow.historyor justhistory. We can use the methods of history object to navigate the URLs in the history list. For example to go the previous page/URL in the history list, we can usehistory.back()method.

JavaScript Navigator Object

The JavaScriptnavigatorobject is also a property of thewindowobject. Using the ‘navigator’ object, you can get the browser version and name and check whether the cookie is enabled in the browser. We can access the navigator object usingwindow.navigator. We can also access it without using the window prefix.

JavaScript Location Object

The JavaScript ‘location’ object contains various properties and methods to get and manipulate the information of the browser’s location, i.e. URL. It’s also a property of JavaScriptwindowobject.

We can use the properties and methods of the location object to manipulate the URL information. For example, to get the host from the current URL, we can use thewindow.location.hostor justlocation.host. The host is property of the location object.

Example

Output

The host of the current location is: www.codescompiler.com

JavaScript Console Object

The JavaScriptconsoleobject allows us to access the debugging console of the browser. It is a property of the JavaScript window object. It can be accessed using window.console or just console.

The console object provides us with different methods such as console.log(). The console.log() method is used to display the message in debugging console.

What’s Next?

We have provided detailed information about each of the above objects in separate chapters.