Problem
As the DOM’s global environment, I’ve seen these words used interchangeably. What is the difference (if there is one) between the two, and when should I utilize each?
Asked by TimeEmit
Solution #1
The main JavaScript object root, commonly known as the global object in a browser, and the root of the document object model is Window. It can be accessed as a window.
window.screen, or simply screen, is a tiny data object that describes the physical dimensions of a screen.
The principal object of the possibly viewable (or better yet: rendered) document object model/DOM is window.document or simply document.
Because window is a global object, you can refer to any of its attributes by their names alone, eliminating the need to write down window. The runtime will figure it out for you.
Answered by Peter Aron Zentai
Solution #2
The window, after all, is the first item that the browser loads. The bulk of the attributes of this window object are length, innerWidth, innerHeight, name, if it has been closed, its parents, and so on.
So, how about the document object? Your html, aspx, php, or other document that will be loaded into the browser is the document object. The document is loaded into the window object and has access to properties such as title, URL, cookie, and so on. What exactly does this imply? That is, if you want to access a property for a window, use window.property, and if you want to access a property for a document, use window.document.property, which is also known as document.property.
That appears to be straightforward. But what happens when you use an IFRAME?
Answered by atazmin
Solution #3
Briefly, with more detail below,
For further information on these objects, see the W3C and Mozilla references. Each browser tab has its own window, and each window contains window.document and window.screen attributes. This is the most basic link between the three. The global context is the browser tab’s window, therefore document and screen refer to window.document and window.screen, respectively. Following Flanagan’s JavaScript: Definitive Guide, more information about the three objects is provided below.
window.window always refers to a window; however, window.parent and window.top may refer to enclosing windows that provide access to different execution contexts. Window characteristics include, in addition to document and screen, which are explained below.
A document object must be rendered for each window object. Because HTML elements are added to the global object when given a unique id, these objects become mixed together. For example, in the HTML snippet
<body>
<p id="holyCow"> This is the first paragraph.</p>
</body>
Any of the following can be used to reference the paragraph element:
A screen object is attached to the window object and has characteristics that describe the physical display:
The viewport in JavaScript refers to the portion of a screen that displays the rendered content, which might be confusing because we refer to an application’s portion of the screen as a window when discussing interactions with the operating system. Any document element’s getBoundingClientRect() method will return an object containing top, left, bottom, and right attributes that describe the element’s position in the viewport.
Answered by Bennett Brown
Solution #4
The actual global object is the window.
The screen is just that: a screen that contains information about the user’s display.
The DOM is found in the document.
Answered by Niet the Dark Absol
Solution #5
Because the window contains everything, you may obtain those elements by calling window.screen and window.document. Take a look at this fiddle, which uses pretty-printing to display the contents of each object: http://jsfiddle.net/JKirchartz/82rZu/
In Firebug/development tools like these, you can also inspect the contents of the object:
console.dir(window);
console.dir(document);
console.dir(screen);
The base of everything is the window, while the screen only has screen dimensions and the document is the top DOM object. As a result, you can think of window as a super-document…
Answered by JKirchartz
Post is based on https://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document-in-javascript