What is the difference between window, screen, and document in JavaScript?

Question

I see these terms used interchangeably as the global environment for the DOM. What is the difference (if there is one) and when should I use each one?

score 393 · Accepted Answer · edited Nov 25 '22 at 15:24

393

window is the main JavaScript object root, aka the global object in a browser, and it can also be treated as the root of the document object model. You can access it as window.

window.screen or just screen is a small information object about physical screen dimensions.

window.document or just document is the main object of the potentially visible (or better yet: rendered) document object model/DOM.

Since window is the global object, you can reference any properties of it with just the property name - so you do not have to write down window. - it will be figured out by the runtime.

edited Nov 25 '22 at 15:24

Giorgi Tsiklauri

9,715
8
45
66

answered Mar 27 '12 at 18:19

Peter Aron Zentai

11,482
5
41
71

1

@Mandy an html element if it is not part of the document is not visible. you can create iframes who's windows is totally not visible until you attach the iframe to the document – Peter Aron Zentai Mar 27 '15 at 22:20
Is the window object identical regardless of which web page you're visiting? And the document is a javascript object containing the information about that web page? – Costa Michailidis Jul 14 '16 at 21:17
40

The comment from @Mandy confuses `window` with *viewport*. A `window` is the JavaScript object for the browser tab or `` (or deprecated `<frame/>`). The *viewport* is the rectangle of the rendered `document` seen within the tab or frame. – Bennett Brown Jan 29 '17 at 22:11
2

window.document or document is same all time? – BOZ Mar 25 '19 at 15:47
3

since window is the global object - every property/method of it can be accessed without actually writing down [window.] so window.document can be written as just document, and of course it points to the very same thing - as the property itself is the same just referenced multiple ways. – Peter Aron Zentai Mar 25 '19 at 22:15
if you use jQuery, `$(window).width()` and `$(document).width()` *might* be the same thing, but at a certain narrowness and if there's a horizontal scrollbar, then using `window` as the argument is going to yield a smaller value than `document` - and yes see @PeterAronZentai's comment - document is really just window.document. Document is what's "inside" the "window" – Oliver Williams May 17 '19 at 15:05
@PeterAronZentai Let's say, I have created a variable and made it a property of window object: window.a=5. Question, is that property preserved when we load a new page of the same site (or refresh the current page) or is it going to disappear? – mangusta Mar 26 '20 at 17:18
Would you treat window as a root object in DOM or in BOM? I've found several contradictory definitions and look for a clear and solid one. – Giorgi Tsiklauri Nov 26 '22 at 05:06

score 164 · Answer 2 · answered Sep 23 '15 at 18:21

164

Well, 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.

What about the document object then? The document object is your html, aspx, php, or other document that will be loaded into the browser. The document actually gets loaded inside the window object and has properties available to it like title, URL, cookie, etc. What does this really mean? That means if you want to access a property for the window it is window.property, if it is document it is window.document.property which is also available in short as document.property.

That seems simple enough. But what happens once an IFRAME is introduced?

See more at: http://eligeske.com/jquery/what-is-the-difference-between-document-and-window-objects-2/#sthash.CwLGOk9c.dpuf

answered Sep 23 '15 at 18:21

atazmin

4,757
1
32
23

40

Misleading for someone trying to learn the basics: "The document object is your html, aspx, php, or other document that will be loaded into the browser." The browser renders HTML and CSS and executes JavaScript. Files with server-side languages like PHP are not seen by the browser. – Bennett Brown Jan 29 '17 at 20:47
@BennettBrown That's true, but beginners exploring `window` and `window.document` in a Chrome (or other debug) console can clarify their nested nature. How `document` exposes HTML and `document.` (document dot) reveals all properties of the document. While the parent `window` contains the javascript globals! This post can get beginners started on this. Beginners should also see [this SO how to](https://stackoverflow.com/a/2934807/2455159) – Stephan Luis Feb 27 '21 at 16:56
Its a nice graph, but agree it is misleading. This is confusing content wise. As someone new, I see a picture that says window has a document property (fine until here), but that the document can be php or aspx (?), which makes sense for someone with background, but a browser knows nothing about these files so it's misleading. – Christos Sirmakezis Jun 11 '22 at 14:29

score 83 · Answer 3 · edited Sep 18 '20 at 10:09

Briefly, with more detail below,

window is the execution context and global object for that context's JavaScript
document contains the DOM, initialized by parsing HTML
screen describes the physical display's full screen

See W3C and Mozilla references for details about these objects. The most basic relationship among the three is that each browser tab has its own window, and a window has window.document and window.screen properties. The browser tab's window is the global context, so document and screen refer to window.document and window.screen. More details about the three objects are below, following Flanagan's JavaScript: Definitive Guide.

`window`

Each browser tab has its own top-level window object. Each <iframe> (and deprecated <frame>) element has its own window object too, nested within a parent window. 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. In addition to document and screen described below, window properties include

setTimeout() and setInterval() binding event handlers to a timer
location giving the current URL
history with methods back() and forward() giving the tab's mutable history
navigator describing the browser software

`document`

Each window object has a document object to be rendered. These objects get confused in part because HTML elements are added to the global object when assigned a unique id. E.g., in the HTML snippet

<body>
  <p id="holyCow"> This is the first paragraph.</p>
</body>

the paragraph element can be referenced by any of the following:

window.holyCow or window["holyCow"]
document.getElementById("holyCow")
document.querySelector("#holyCow")
document.body.firstChild
document.body.children[0]

`screen`

The window object also has a screen object with properties describing the physical display:

screen properties width and height are the full screen
screen properties availWidth and availHeight omit the toolbar

The portion of a screen displaying the rendered document is the viewport in JavaScript, which is potentially confusing because we call an application's portion of the screen a window when talking about interactions with the operating system. The getBoundingClientRect() method of any document element will return an object with top, left, bottom, and right properties describing the location of the element in the viewport.

there is an equivalent instruction to `window.onload` using document object ?. — Canatto Filipe, Jan 04 '18 at 01:42
@FilipeCanatto see https://stackoverflow.com/questions/588040/window-onload-vs-document-onload — Bennett Brown, Jan 12 '18 at 06:02
This is [plagiarised at Medium](https://simransingh27.medium.com/what-is-the-difference-between-window-screen-and-document-in-javascript-2901c29e613b) (Simran Singh). From *"window ... Each browser tab has its own"*. Simran Singh's post at Medium is 100% plagiarised. The first part comes from the http://eligeske.com/ page (also plagiarised in two answers to this Stack Overflow question ([Arlan T's](https://stackoverflow.com/a/32746769) and [Manjunath Raddi's](https://stackoverflow.com/a/29475242) answers)). — Peter Mortensen, May 31 '21 at 15:59
Peter, agreed that Singh plagiarized pretty egregiously. I don't mind much, and actually mind MUCH more that the one thing he cut out of my post was the part where I said that my post was following Flanagan. I guess if he was going to plagiarize, he felt it necessary to delete references LOL. — Bennett Brown, Jun 03 '21 at 15:16
```top === parent``` returns true in console, same as ```globalThis === self``` or any pair or even multiple combination between ```this, self, top, parent, window``` or ```globalThis```, even stuff as ```window.window.self.top.parent.globalThis === this.window``` except for specifically having ```this``` in last position as ```this``` isn't a property. For this reason would you mind to give some more reference to your statement saying that *window.window always refers to window, but window.parent and window.top might refer to enclosing windows, giving access to other execution contexts*? 1/2 — Eve, Apr 12 '22 at 21:39
Let's not forget that ```window``` is parent for itself therefore ```window.window === window``` returns ```true``` or even ```window.parent === window``` which is the same. We can use even ```window.window.window``` which gives the same (the ```window``` itself) as ```window``` is the top level object in the browser. 2/2 — Eve, Apr 12 '22 at 21:41
@Eve, see for example https://developer.mozilla.org/en-US/docs/Web/API/Window/parent . `window.parent != window` if it refers to the execution context of a `` for example. — Bennett Brown, Apr 21 '22 at 12:32

score 56 · Answer 4 · answered Mar 27 '12 at 18:17

56

The window is the actual global object.

The screen is the screen, it contains properties about the user's display.

The document is where the DOM is.

answered Mar 27 '12 at 18:17

Niet the Dark Absol

320,036
81
464
592

13

`document` can also be `window.document`, `screen` can be `window.screen`, and `window` can be `window.window` (or `window.window.window`) :-P – gen_Eric Mar 27 '12 at 18:19
6

@PeterAronZentai: That's because `window` is a global variable, which makes it a property of the global `window` object. :-) – gen_Eric Mar 27 '12 at 19:02
1

I need to open a new page by ajax, i want to replace the whole current page with new one. Should i use either $(document).load(page); or $(window).load(page); ? – Martin AJ Sep 05 '16 at 11:04

score 15 · Answer 5 · edited May 31 '21 at 15:31

The window contains everything, so you can call window.screen and window.document to get those elements. Check out this fiddle, pretty-printing the contents of each object: http://jsfiddle.net/JKirchartz/82rZu/

You can also see the contents of the object in Firebug/development tools like this:

console.dir(window);
console.dir(document);
console.dir(screen);

window is the root of everything, screen just has screen dimensions, and document is top DOM object. So you can think of it as window being like a super-document...

Eve · Answer 6 · 2022-04-13T04:07:27.127

In console, by writing

this

or

window

and hitting Enter, we can access the window which is the top level object in the browser -- or even by using either one of those properties of window, too:

top

parent

self

globalThis

even combined in between.

Indeed, checking any pair of those above will return true :

this === window // true

window === globalThis // true

this === self // true

parent === window // true

top === parent // true

even some multiple combinations of them -- fact possible for the reason that

window.window === window // true

because window is also its own property, so we can even write window.window.window === window as well, or even stuff like window.window.self.top.parent.globalThis === window, all those returning true.

The only exception is that we can't use this on the last position because it isn't a property (therefore window.window.this === window // false because actually window.this === undefined // true, as window has NOT a such this property).

As a result, we can't write ~~self.this~~, ~~top.this~~, ~~parent.this~~, ~~window.this~~, the only way possible being to replace it instead with globalThis in the last position, as a property of window, like in top.globalThis etc.

When having a webpage with frames, each frame document would belong to an own separate window object, that separate window being a child of the previous top level window shown earlier - you can simply test that on a platform with frames (like jsfiddle, codepen, w3schools) where writing and executing in the frame console.log(window.parent === window); will return false while if you write window.parent === window directly in console will return true. In the frame, window.parent will access the global window (the parent of frame window object being obviously not the same as the frame window object itself). You can check content of each these windowS separately running in the frame the codes (and seeing results like):

console.log(window.document.all); // HTMLAllCollection(6) [html, head, body, p#demo, button, script, demo: p#demo]

respectively

console.log(window.parent.document.all); // HTMLAllCollection(335) [html, head, script, script, title, meta, meta, meta, meta, meta, meta, meta, meta, link, link, link, link, script, script, script, script, script, script, script, script, script, style, script, script, script, script, style, script, meta, meta, meta, meta, meta, meta, meta, meta, script, argprec0, argprec1, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, …] - therefore much more elements contained in the parent document

Doing same check, but from the console this time:

window.document.all // HTMLAllCollection(335) [html, head, script, script, title, meta, meta, meta, meta, meta, meta, meta, meta, link, link, link, link, script, script, script, script, script, script, script, script, script, style, script, script, script, script, style, script, meta, meta, meta, meta, meta, meta, meta, meta, script, argprec0, argprec1, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, link, script, …] - again the same huge elements list

As we see, the console (open it with F12) has access to the most top level window scope / context (versus the frame underneath that is contained in its own limited context / scope) so it shows all elements at once. This is same context we started to refer in the beginning as well.

Going further with the main concepts, there is even more to understand. In saying that window is the top level object in browser one should understand that it is a certain representation in the memory of the browser (software called client) from where the browser will paint (render) the visible page (which we refer to as a document - again, accesible as a property of window).

As such, we can access the document in console - to see its structure - simply using window.document where we can see everything in it by clicking on #document. Again, we will see there a representation of the document, not the document itself. That representation seen in console is the DOM, being a Model of the original file, and is created by taking PLUS improving in a certain way, where needed, the data parsed from source code of the original document by the JavaScript engine of the browser. The source code is immutable (the browser doesn't change the html file received from internet), while the DOM is mutable (and the mutations are made by JavaScript code ran into the browser either before or after the page is rendered on the device hardware). For clarity: what we see in console is DOM, what we see in browser is the rendering and what we see in source code is the original file. They're not the same, everyone is different from the other two.

To help you understand, I would compare that process with client software being in "real life" some talented person visiting the Louvre museum and seeing the Monalisa painting (the source code file). The image of Monalisa in tourist mind isn't the same as the original painting made by Leonardo, it's just a mental representation of it. From it, the talented tourist will then recreate again on his brain some "own" Monalisa, improving here and there what should be improved or changed before finally painting when back at home on a canvas all the colors of the original image plus even more.

Therefore, we have 3 'entities' (a- html file, immutable, containing the source code, b- one representation of it, created after the source code is parsed and "understood" by the browser or improved, c- the rendering itself that is displayed on the screen). The primary improvement mentioned can be like adding closing tags where missing previously in the source file, adding or deleting elements inside the Model, according to the script instructions contained in the source file, changing them, requesting further resources (as images, fonts, css files, media files to be used as assets of the final full page, etc) and so on.

Despite of similarity in names, a window related to a specific document and browser window shouldn't be considered as the same thing, the first one being attached to the later one (and accesible as a property of it). Likewise, when having multiple browser windows (say 10 instances), each one with multiple tabs (or not), those are attached to the browser window, and their objects accesible by window[0] up to window[9].

Regarding the screen, browser client is a software (a code) that runs and executes another software (source code) for the purpose of finally displaying that (second) code on the hardware device (monitor / screen) through several layers. For this purpose, browser software has also actually its own separate programming routines able to interact with the operating system in order to detect the screen resolution, size, color depths, some settings and more, therefore it acts as a bridge between the operating system and the files meant to be displayed on its rendering area.

Using console.log(window.screen) will return to us the details collected from the OS by the browser about the device monitor (and stored in its memory) such as {availWidth: 1920, availHeight: 1040, width: 1920, height: 1080, colorDepth: 24, …}

A simpler code can be used (no need to write always the window word) and extract for example the width of the device:

console.log(screen.width) // 1920

You can use such data even for executing some pseudo media queries based purely on JavaScript and with no CSS whatsoever - for example

function goMobile() {
    if (screen.width < 900) {location.replace("/index-mobile.html");}
}
goMobile();

As a conclusion: window and document belong to DOM, screen doesn't. You need all of them, however because document and screen are both properties of window object, you can just invoke them directly in your code (shortening the code). More, screen being about the hardware part, not any browsers' rectangular available area to render on, it hasn't the meaning of document.body. At most, you can put screen data to use in order to optimize your loading page, for example limiting the assets downloads for a better mobile device experience and so on.

score 2 · Answer 7 · answered Feb 24 '23 at 17:45

window is the root object, everything is mounted on it. document equals to window.document.

When register some global events like keyboard shortcuts or context menu, it's recommended to use window.addEventListener instead of document. The events on document will bubble to window:

window.addEventListener('keyup',() => console.log('window'));
document.addEventListener('keyup',() => console.log('document'));
// Output: 'document', 'window'
document.addEventListener('keyup',(ev) => {
  console.log('document');
  ev.stopPropagation();
});
// Output: 'document'

score 0 · Answer 8 · answered Aug 23 '22 at 16:37

The window object is simply like the root of them all to which document and screen are properties of. The screen is just the user display area, document is the DOM containing all html elements, their classes and attributes. So, the window is the parent object while they are children objects. https://developer.mozilla.org/en-US/docs/Web/API/Window https://developer.mozilla.org/en-US/docs/Web/API/Window/screen

What is the difference between window, screen, and document in JavaScript?

8 Answers8

`window`

`document`

`screen`

Linked

Related