First Things First: The DOM

The document is an object model of any HTML web page that is run in a browser application. Individual elements of an HTML page can be accessed through the document object model. Document objects are used to add dynamic content to a web page.

Many times we must have thought that what exactly is the difference between Document and Window object in JavaScript. In this blog I will try to explain the difference between them from the perspective of a newbie developer. Let's see the window object first.

Window Object:

The window object is the global object of any document object model. It is the first thing that gets loaded into the browser. This window object has many properties like length, name, innerWidth, innerHeight, outerWidth, outerHeight, console etc. The window object is initialized as soon as that window appears on the viewport of a device. All children of window object can be accessed by using window.childName or just by childName since window is the global object of browsers.

Document Object:

The document object is a child of the window object. It can be accessed with window.document or just by document. The document object serves as an entry point into any web page's content. Document object also has many properties like activeElement, cookie, doctype, body, head etc. The DOM is contained inside the document object. This document object is initialized when the HTML file is parsed by the browser.