• JavaScript Video Tutorials

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 JavaScript window object 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 JavaScript global variables are properties of window object. All global functions are 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");

The innerHeight and innerWidth properties 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

The document object is 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 as window.document or just document.

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" using getElementById() method and manipulate it –

Example

<html>
<body>
   <div id ="text">This text will be changed. </div>
   <script>
      // Access the element with id as text
      const textDiv = document.getElementById("text");
      // Change the content of this element
      textDiv.innerHTML = "The text of this DIV is changed.";
   </script>
</body>
</html>

Output

The text of this DIV is changed.

JavaScript Screen Object

In JavaScript, the screen object 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 as window.screen or just screen.

To get the width and height of the device screen in pixels we can use the screen.width and screen.height properties –

Example

<html>
<body>
<div id ="width">Width of the device screen is </div>
<div id ="height">Height of the device screen is </div>
<script>
   document.getElementById("width").innerHTML += screen.width + " px.";
   document.getElementById("height").innerHTML += screen.height + " px.";
</script>
<p> The above result may be different for different device.</p>
</body>
</html>

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, the history object is also a property of the window object. 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 using window.history or just history. 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 use history.back() method.

JavaScript Navigator Object

The JavaScript navigator object is also a property of the window object. 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 using window.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 JavaScript window object.

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 the window.location.host or just location.host. The host is property of the location object.

Example

<html>
<body>
   <div id = "output"> </div>
   <script>
      document.getElementById("output").innerHTML = 
	  "The host of the current location is: " + location.host;
   </script>
</body>
</html>

Output

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

JavaScript Console Object

The JavaScript console object 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.

Advertisements