What is the difference between window, screen, and document in Javascript?
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()andsetInterval()binding event handlers to a timerlocationgiving the current URLhistorywith methodsback()andforward()giving the tab's mutable historynavigatordescribing the browser software
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. So the following ststements all return the same window object:
window
window.window
window.window.window
document
Each window object has a document object to be rendered. 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. When an HTML document is loaded into a web browser , it becomes a document object. It is the root node of the HTML document. The document actually gets loaded inside the window object and has properties available to it like title, URL, cookie, etc. HTML documents, served with the “text/html” content type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface. 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.holyCoworwindow["holyCow"]document.getElementById("holyCow")document.querySelector("#holyCow")document.body.firstChilddocument.body.children[0]
So, document and window.document shall return the same.
screen
The window object also has a screen object with properties describing the physical display:
- screen properties
widthandheightare the full screen - screen properties
availWidthandavailHeightomit the toolbar