What is the difference between window screen and document in Javascript

Question

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

User · Accepted Answer

Window is the main JavaScript object root  aka the global object in a browser  also can 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

User · Answer

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  lt iframe gt   and deprecated  lt frame gt   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  lt body gt     lt p id  quot holyCow quot  gt  This is the first paragraph  lt  p gt   lt  body gt   the paragraph element can be referenced by any of the following   window holyCow or window  quot holyCow quot   document getElementById  quot holyCow quot   document querySelector  quot  holyCow quot   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

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

Examples related to javascript