Skip to main content

Window Object in JavaScript

The Browser Object Model (BOM) is a set of APIs that allow JavaScript to interact with the browser and its elements, such as the window, document, and location objects.

The BOM is not part of the JavaScript language itself but is implemented by the browser environment in which the JavaScript code is running.

The window object has many properties and methods that allow you to interact with the browser window and its contents

Such as:

The window.alert()​

Displays a pop-up dialog box with a message and an OK button.

The syntax for using the window.alert() method is as follows:

window.alert(message);

Here: message is the string to be displayed in the alert box.

The window.confirm()​

Displays a pop-up dialog box with a message, OK, and Cancel buttons, and returns true or false depending on the user's choice.

The syntax for using the window.confirm() method is as follows:

window.confirm(message);

Here: message is the string to be displayed in the dialog box.

The window.prompt()​

Displays a pop-up dialog box with a message, an input field, OK, and Cancel buttons, and returns the value entered by the user or null if the user clicks Cancel.

The syntax for using the window.prompt() method is as follows:

window.prompt(message, defaultResponse);

Here: message is the string to be displayed in the dialog box, and defaultResponse is an optional parameter that specifies the default text to be displayed in the input field. If this parameter is omitted, the input field will be empty by default.

The window.location​

Represents the URL of the current web page and provides methods to navigate to other URLs, such as window.location.href to set or get the current URL.

Some common properties of the window.location object are:

  • href: The full URL of the current page.
  • protocol: The protocol (e.g., "http" or "https") of the current page.
  • hostname: The hostname (e.g., "www.example.com") of the current page.
  • port: The port number (e.g., 80 or 443) of the current page.
  • pathname: The path (e.g., "/blog/article.html") of the current page.
  • search: The query parameters (e.g., "?page=2&sort=asc") of the current page.

For example, the following code displays the current URL of the page in an alert box: 

const currentUrl = window.location.href;
window.alert(`The current URL is: ${currentUrl}`);

When the above code is executed:

  • it retrieves the current URL of the page using the window.location.href property, and then displays it in an alert box using the window.alert() method.

The window.document​

Represents the HTML document in the current web page and provides methods to manipulate its contents, such as window.document.getElementById() to select an element by its ID.

Some of the common properties and methods of the Document object include:

  • document.title: Gets or sets the title of the document.
  • document.body: Gets the reference to the body element of the document.
  • document.getElementById(id): Returns the element with the specified ID.
  • document.createElement(tagName): Creates a new HTML element with the specified tag name.

For example, to get the title of the current document, you could use the following syntax:

var title = window.document.title;

Or to get the reference to the body element:

var body = window.document.body;

Here's an example of how to use the window.alert() method to display a message in a pop-up dialog box:

window.alert("Hello, world!");

In this example:

  • The alert() method is called on the window object with the string 'Hello, world!' as its argument, causing a pop-up dialog box to appear with the message.

The Window Object​

The Window object provides properties and methods to interact with the browser window and its contents.

The window.document property refers to the global document object in the browser, which represents the entire HTML document. The getElementById() method is a property of the document object and is used to obtain a reference to an element in the document with a specified id attribute.

So

window.document.getElementById("header");

is the same as

document.getElementById("header");

because window.document is the same as document in the browser environment, and both methods are equivalent ways of obtaining a reference to an element with the id attribute "header".

The Window Size​

You can get the size of the browser window using the window.innerWidth and window.innerHeight properties. These properties return the width and height of the viewport in pixels, excluding the size of the browser's toolbars and other UI elements.

Here's an example of how to use these properties to get the size of the browser window:

window.addEventListener('resize', () => {
  const width = window.innerWidth;
  const height = window.innerHeight;
  console.log(`The browser window has been resized to ${width}px x ${height}px`);
});

In this example:

  • An anonymous arrow function is passed as the second argument to the addEventListener() method
  • Which gets called every time the resize event is triggered on the window object.
  • Inside the function, the innerWidth and innerHeight properties are used to get the new size of the browser window, and the result is logged to the browser console.