Window Object

The window object is the topmost object of the DOM hierarchy. It represents a browser window or frame that displays the contents of the webpage. Whenever a window appears on the screen to display the contents of the document, the window object is created. 

Syntax:

window.property_name;

The properties of Window objects that are commonly used are listed in the below table:

Properties of the window:

• Closed: It holds a Boolean value that represents whether the window is closed or not.
• console: It returns a reference to the console object which provides access to the browser’s debugging console.
• defaultStatus: It is used to define the default message that will be displayed in the status bar when no activity is carried on by the browser.
• controllers: It returns the XUL controller objects for the current Chrome window.
• customElements: It returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and also get information about already registered custom elements.
• crypto: It returns the browser crypto object.
• devicePixelRatio: It returns the ratio between physical pixels and device-independent pixels in the current display.
• Document: It returns a reference to the document object of that window.
• DOMMatrix: It returns a reference to a DOMMatrix object, which represents 4×4 matrices, suitable for 2D and 3D operations.
• frames[]: It represents an array that contains all the frames of a given window.
• DOMPoint: It returns a reference to a DOMPoint object, which represents a 2D or 3D point in a coordinate system.
• History: It provides information on the URLs visited in the current window.
• Length: It represents the number of frames in the current window.
• DOMRect: It returns a reference to a DOMRect object, which represents a rectangle.
• fullScreen: This property indicates whether the window is displayed on full screen or not.
• Location: It contains the URL of the current window.
• innerHeight: It is used to get the height of the content area of the browser window.
• innerWidth: It is used to get the width of the content area of the browser window.
• Name: It contains the name of the referenced window.
• Window: It returns the current window or frame.
• Navigator: It returns a reference to the navigator object.
• outerHeight: It will get the height of the outside of the browser window.
• outerWidth: It will get the width of the outside of the browser window.
• Status: It overrides the default status and places a message in the status bar.
• Top: It returns a reference to the topmost window containing a frame if many windows are opened.
• Toolbar: It will result in the toolbar object, whose visibility can be toggled in the window.
• Opener: It contains a reference to the window that opened the current window.
• Parent: It refers to the frameset in which the current frame is contained.
• Screen: It refers to the screen object
• Self: It provides another way to refer to the current window.

Methods of Window:

Syntax:

window.method_name;

The methods of Window objects that are commonly used are listed in the below table:

• alert(): It is used to display an alert box. It displays a specified message along with an OK button and is generally used to make sure that the information comes through the user.
• atob(): It is used for decoding a base-64 encoded string. It is used to decode a string of data that has been encoded using the btoa() method.
• blur(): It is used to remove focus from the current window.
• btoa(): It is used for encoding a string in base-64 format.
• clearInterval(): It clears the interval which has been set by the setInterval() function before that.
• clearTimeout(): It clears the timeout which has been set by the setTimeout()function before that.
• close(): It is used for closing a certain window or tab of the browser which was previously opened.
• confirm(): It is used to display a modal dialog with an optional message and two buttons i.e. OK and Cancel. It returns true if the user clicks “OK”, and false otherwise.
• focus(): It is used to give focus to an element in the current window.
• getComputedStyle(): It is used to get all the computed CSS properties and values of the specified element.
• getSelection(): It returns a Selection object representing the range of text selected by the user
• matchMedia(): It is used to return a MediaQueryList object which represents the result of the specified CSS media query string.
• open(): It is used to open a new tab or window with the specified URL and name.
• moveBy(): It is used for moving a window with a specified number of pixels relative to its current coordinates.
• moveTo(): It is used in the window to move the window from the left and top coordinates.
• prompt(): It is used to display a dialog with an optional message prompting the user to input some text
• resizeBy(): It is used to resize a window by the specified amount.
• resizeTo(): It is used to resize a window to the specified width and height.
• scrollBy(): It is used to scroll the document by the given number of pixels.
• scrollTo(): It is used to scroll to a particular set of coordinates in the document.
• setInterval(): It repeats a given function at every given time interval.
• setTimeout(): It executes a function, after waiting a specified number of milliseconds.
• stop(): It is used to stop the window from loading resources in the current browsing context.

Example: This example describes the implementation of the window.object.

Output:

Difference between document and window:

In this article, we will see the Document object & Window object, their various properties & methods, along with knowing their implementation & the differences between them.