What Is Document Object Model? Explained In One Minute

Posted by TotalDC

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. In this guide, I’ll briefly introduce the DOM.

From code to your screen

First lets see how a web page is built. How a browser goes from a source HTML document to displaying a styled and interactive page in the viewport is called the Critical Rendering Path. The first stage involves the browser parsing the document to determine what will ultimately be rendered on the page, and the second stage involves the browser performing the render. The result of the first stage is what is called a render tree. The render tree is a representation of the HTML elements that will be rendered on the page and their related styles. In order to build this tree, the browser needs two things – the CSSOM, a representation of the styles associated with elements and the DOM, a representation of the elements.

So what is Document Object Model (DOM)?

DOM stands for Document Object Model. programming interface for HTML and XML documents. Basically it represents the page so that programs can change the document structure, style and content. DOM represents the document as nodes and objects so that programming languages can connect to the page. In other words DOM is an object oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

Important to understand that although DOM is created from the source HTML document, it is not always exactly the same. For example when HTML is not valid your browser corrects some errors in your code. In example when you forget important tag your browser interprets it and then if looking to browsers dev tools you can see tags that is not present in your original code. Same is when in example JavaScript dynamically creates additional elements DOM would be updated, but not your original HTML document.

Tl;Dr

The DOM is an interface to an HTML document. It is used bu browsers to determin what to render in the viewport and bu JavaScript to modify the content or styling of your web page.