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

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

Also Read:

1. Using es6 modules with simple examples
2. position:absolute
3. The JavaScript Prototype Property - Visualized
4. Getting started with automation testing for webrtc applications
5. Getting started with es6 iterators and iterables