A document is an object inside the window object and we use a document object for manipulation inside the document.
The first thing that gets loaded into the browser is the window and the properties related to that window are stored in the window object. Properties related to window objects are length, innerWidth, innerHeight, caches, etc.
There was a document object too so what about it then?
So after the window gets loaded then there’s a document (HTML, PHP, or another document) loaded inside that window, and the properties related to that document is stored in the document object. Properties related to document objects are title, URL, cookie, etc.
- window object:
- document object:
document.propertyname // OR window.document.propertyname
Example 1: Focus on the window object.
Example 2: Focus on the document object.
|It represents the document loaded inside the window or browser.||It represents the browser window in which you are seeing the content.|
|The properties related to it are stored in the document object.||The properties related to it are stored in the window object.|
|It is loaded after the loading window because the window contains a document.||It is loaded before the document because window container document.|
|It is the root element of the document object model.||The window is the global element for all objects, functions, etc.|
|It is an object of window.||It is an object of the browser.|
|We can not access windows objects properties inside the document.||We can access document object properties inside the window.|
|Example: document.title will return the title of the document||Example: window.document.title will return the title of the document.|