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, let’s 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. 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 a Document Object Model (DOM)?

DOM stands for Document Object Model. programming interface for HTML and XML documents. 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 the same. For example, when HTML is not valid your browser corrects some errors in your code. For example when you forget an important tag your browser interprets it and then if looking at browser dev tools you can see tags that are not present in your original code. The same is true when for 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 by browsers to determine what to render in the viewport and by JavaScript to modify the content or styling of your web page.