[javascript] What is the difference between window, screen, and document in Javascript?

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?

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

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.

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/dev 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...

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

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

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.