Browser Object Model - BOM in Javascript

Table of Contents

• Introduction
• window
• window.document
• window.navigator
• window.screen
• window.history
• window.location

Introduction

Javascript was created for adding functionality to web pages, hence it was developed to run in web browsers. But as time passed, javascript evolved and developed into a full-fledged programming language.

The platform on which javascript runs, here, web browsers also provides platform-specific functionality. To access these functionalities using javascript, host environment(web browser) provides objects and functions.

Browser Object Model(BOM) refers to the objects provided by the web browser for manipulating properties and objects associated with it. The objects and properties provided by the Browser Object Model allow javascript to interact with the browser.

Some of the important BOM(Browser Object Model) objects which are available while executing javascript are:

• window
• window.document
• window.navigator
• window.screen
• window.history
• window.location

You can drop window prefix for all the above properties and access it directly as document, navigator, screen, history, and location.

Let’s learn briefly about all the above objects. We will learn about them in greater detail in their dedicated articles.

You can open the browser console(CTRL + SHIFT + J) in this window to run the code examples in this article.

window

The window object represents the browser’s window containing the web document. It is the root object of the BOM hierarchy. To view properties and objects it contains execute the below code in your browser console.

//window object
console.log(window)

window.document

The document object represents and returns the reference of the document loaded in the browser’s window.

//title of the loaded document in the window
console.log(window.document.title)

window.navigator

The window.navigator object returns the reference to the Navigator Object. Navigator Object contains information about the user agent(browser) and the operating system.

//To get the User-Agent
console.log(window.navigator.userAgent)

window.screen

The window.screen object returns information about the user’s screen.

//get screen width
console.log(window.screen.width)

//get screen height
console.log(window.screen.height) 

window.history

The window.history returns a reference to the History Object. You can use it for manipulating browser session history(pages visited in the same tab).

// go to previous web page, equivalent to clicking back button
window.history.back(); 

window.location

You can get the current page address(URL) or redirect the browser to a new web address using the window. location object.

//current page web address
console.log(window.location.href)

We will learn about all the important BOM objects and their properties in another article.

If you liked this article, please upvote and recommend it to show your support. Feel free to ask any questions in the comments below.

We publish articles on web development and technology frequently. Consider subscribing to our newsletter or follow us on our social channels (twitter, Facebook, LinkedIn).