Differencebetween Window, Screen, and Document in JavaScript

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

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.

What's the differences between document and window

A quick search on Google, or here on StackOverflow, would have found a stack of answers. These will help you understand the difference.

1. What is the difference between window, screen, and document in Javascript?

2. trying to understand the difference between window and document objects in js

Difference between document and window in the DOM?

The window command are the Web APIs that the browser has. It is always executed last because it is not Javascript and therefore the event loop will prioritize your JavaScript commands first. The document, on the other hand, is used for DOM manipulation to modify the HTML.

trying to understand the difference between window and document objects in js

A very detailed explanation: Read here

Basically window is your browser's window and document is the HTML page inside it.

Viewport vs Window Vs Document

Things are different when your page is bigger than your screen.

Viewport is the rectangle area where things are visible to you. The document can be larger than that and you'll see scrollbars if so.

As for your second question: window.onload vs document.onload

Here is a summary.

Viewport: It is your device screen.

Window: It is your browser window. The window can be as big as viewport or smaller.

Document: It is the webpage. It can be bigger than viewport or even bigger than window.

Notes:
Some websites are for not created for mobiles. Hence the webpage/document is much bigger than the mobile viewport and you have to swipe to see the parts that spill outside the screen.
On a desktop, you can make the window of your browser smaller or same as the viewport/monitor.

Difference between screen and window property?

screen is actually window.screen since window is the context for globals.

A window object (obtained through document.defaultView) returns information about both the window and the viewport. To get the application window size use window.outerHeight, to get viewport size use window.innerHeight.

The screen object refers to the actual monitor window or desktop size. Note that if you have a multi-mon setup then you will have multiple screen objects. A window object belongs to a single screen, though not very window belongs to the same screen. I do not know what happens when a browser window spans multiple screens.

From all this, you can determine that if you are running a full-screen browser then window.outerHeight == window.innerHeight == screen.height.

Source: https://developer.mozilla.org/en-US/docs/DOM/window.screen and https://developer.mozilla.org/en-US/docs/DOM/window

Difference between $(window).width() vs $(document).width()

From the documentation of width():

This method is also able to find the width of the window and document.

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

Simple jsFiddle Demo

In the demo, I have set html { width: 1000px; }, which is bigger than the viewport.

The width of the body of your HTML page is a third value. $('body').width() can also differ from the other two (try body { margin: 100px; } for example).

Really - window.document and document inside window is not the same. Chrome

This is just the way chrome's developer tools work. They have a few different formats that they can output information in the console. Dom nodes, which are a type of object, have gotten their own fancy implementation, since they're such a common occurrence in web development. So when you do window.document, that's the format it chooses to output it.

For other types of objects they output it in a different format, and that's what it's doing when you do window. It's true you can expand this to drill into window.document, but the dev tools keep displaying it in the same format, rather than trying to nest one format inside another.

difference between window and document in jQuery

Phew . . . that's actually a lot bigger of a question than you may realize. :)

The Extremely Short Answer is . . .

The window object represents the container that the document object is displayed in. In fact, when you reference document in your code, you are really referencing window.document (all properties and methods of window are global and, as such, can be referenced without actually specifying window at the beginning . . . e.g., document = window.document and alert() = window.alert()).

The document object is the currently loaded DOM document . . . so, if you go to http://www.stackoverflow.com, the document object would be all of the HTML, JS, CSS, etc. that are loaded to make up the StackOverflow home page. If you click on the link to this question, the document is now all of the same kinds of assets that make up the page for this question. When you change documents though, you are still in the same window (though some of the properties of the window have changed).

For LOTS of information on the two objects (including standard properties and methods), check out these links:

• the window object - https://developer.mozilla.org/en-US/docs/Web/API/Window
• the document object - https://developer.mozilla.org/en-US/docs/Web/API/document

One last note: While not completely accurate, if you are a visual person, you can think of the window as the browser window or tab that you have open to view web pages . . . you may move through many documents as you are surfing, but, if you never change to a different tab, you are always in the same window.

---

Related Topics