JavaScript Internals (521 Qs)•Part 2: Promises, Callbacks, Async & Strict Mode (54 - 103)
What is the difference between window and document
Below are the main differences between window and document,
| Window | Document |
|---|---|
| It is the root level element in any web page | It is the direct child of the window object. This is also known as Document Object Model (DOM) |
| By default window object is available implicitly in the page | You can access it via window.document or document. |
| It has methods like alert(), confirm() and properties like document, location | It provides methods like getElementById, getElementsByTagName, createElement etc |
Practical Code Example
javascript
// 'window' = Global execution context / Browser Object Model (BOM)
console.log(window.innerWidth); // Viewport width
console.log(window.location.href); // Current URL
// 'document' = Document Object Model (DOM) root representing the loaded HTML page
console.log(document.title); // Page title
console.log(document.getElementById('root')); // DOM element
console.log(window.document === document); // true (document is property of window)