Browser Object Model – BOM in Javascript

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

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)

Related Posts

What are custom events in JavaScript?

Custom events are the events that allow you to decouple the code you want to run after a specific piece of code runs. There are various in-built events…

How to use nested for loop in JavaScript?

We use the for loop statement of JavaScript for repeating a set of statements inside the loop body a specified number of times. A nested for loop, as the…

What are the basic rules for JavaScript parameters?

A JavaScript function is a code that performs a particular task. The function parameters are the name list in the function definition. Parameters are also known as…

How to stop refreshing the page on submit in JavaScript?

Using event.preventDefault() to stop page refresh on form submit In this section, we will see how to use event.preventDefault() to stop page refresh on form submission. The event.preventDefault() restricts the default…

Target a Window Using JavaScript or HTML

TARGET attribute of HTML A link’s opening named frame or window is specified using the Target attribute of the <a> anchor tag. The concluding </a> tag in…

What is the role of deferred scripts in JavaScript?

Since JavaScript is a loosely typed language, you are not required to correctly predict the kind of data that will be kept in a variable. Depending on the information…