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?
global object in a browser, also can be treated as the root of the document object model. You can access it as
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 visible (or better yet: rendered) document object model/DOM.
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.
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?
window is the actual global object.
screen is the screen, it contains properties about the user’s display.
document is where the DOM is.
Briefly, with more detail below,
documentcontains the DOM, initialized by parsing HTML
screendescribes 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.screen properties. The browser tab’s
window is the global context, so
screen refer to
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.top might refer to enclosing windows, giving access to other execution contexts. In addition to
screen described below,
window properties include
setInterval()binding event handlers to a timer
locationgiving the current URL
forward()giving the tab’s mutable history
navigatordescribing the browser software
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 object also has a
screen object with properties describing the physical display:
heightare the full screen
availHeightomit the toolbar
getBoundingClientRect() method of any
document element will return an object with
right properties describing the location of the element in the viewport.
window contains everything, so you can call
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-
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.