Be the first user to complete this post

  • 0
Add to List

window vs document

Web browser is made up of hierarchy of objects. At the root level we have a window object.

Window

  • It is the root level element in any web page.
  • All the global variables are defined on the window object.
    • For example, alert(), confirm() are methods defined on the window object.
    • Writing alert() is similar to window.alert()
    • Also, properties like document, location are properties of the window object.
    • window API
Watch the following video to know more about the window object.
[youtube https://www.youtube.com/watch?v=VSgSNQ1-KBo]

Document

  • It is the direct child of the window object. It is aka Document Object Model (DOM).
  • You can access it via window.document or document.
  • document object has many useful methods defined on it.
    • For example, document.getElementById(), document.getElementByTagName(), document.createElement(), document.querySelector() and many more
    • document API
Watch the following video to know more about the document object.
[youtube https://www.youtube.com/watch?v=XllU4HswEbc]



Also Read:

  1. Parse html response with fetch API
  2. css - align text to an image vertically
  3. css : center element vertically and horizontally
  4. simple css reset
  5. A simple requestAnimationFrame example visually explained
  6. gzip compress and cache api response in express
  7. JavaScript Promises - Visualized
  8. Understanding callbacks in javascript