JavaScript: Window, Document and Screen

Window

The JavaScript window object sits at the top of the JavaScript Object hierarchy and represents the browser window. The window object is supported by all browsers. All global JavaScript objects , functions, and variables automatically become members of the window object. The window is the first thing that gets loaded into the browser . This window object has the majority of the properties like length, innerWidth, innerHeight, name, if it has been closed, its parents, and more.

The window object represents the current browsing context . It holds things like window.location, window.history, window.screen, window.status, or the window.document . Each browser tab has its own top-level window object. Each of these windows gets its own separate global object. window.window always refers to window, but window.parent and window.top might refer to enclosing windows, giving access to other execution contexts. Moreover, the window property of a window object points to the window object itself.

Document

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM tree includes elements such as <body> and <table>, among many others. It provides functionality globally to the document, like how to obtain the page's URL and create new elements in the document

The Document interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. HTML, XML, SVG, …), a larger API is available: HTML documents, served with the "text/html" content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.

Screen

Screen is a small information object about physical screen dimensions . It can be used to display screen width, height, colorDepth, pixelDepth etc. It is not mandatory to write window prefix with screen object. It can be written without window prefix.

Example:

screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Why State Management Is All Wrong

Understanding React from a form

How to Integrate EPNS subgraph into your React Application

Event Sourcing Pattern for Real-Time Frontends

ExpressJS — Routing

JavaScript reduce()

React Native — Drawer Navigation

What’s really wrong with node_modules and why this is your fault

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suraj Shenoy

Suraj Shenoy

More from Medium

How To Build A Stopwatch in JavaScript Using A Constructor Function

❌You Don't Know How JavaScript Copy Variables (Shallow Copy)

TailwindCSS Automatic Class Sorting with Prettier

Class Sorting with Prettier Pluggins

Coding Conditionals