The Document Object Model, or “DOM,” is the interface to a web page. It is essentially an API for the page, allowing programs to read and manipulate the content, structure, and style of the page. Let’s break it down.

How to create a Web page?

The way in which the browser transforms from a source HTML document to a stylized interactive page in the viewport is called the “critical render path.” This process can be roughly divided into two stages. The first phase involves the browser parsing the document to determine what will eventually be rendered on the page, while the second phase involves the browser performing rendering.

  • CSSOM, representing the style associated with the element
  • DOM, the representation of the element

How is the DOM created (and what does it look like)?

The DOM is an object-based representation of a source HTML document. As we’ll see below, it has some differences, but is essentially an attempt to transform the structure and content of an HTML document into an object model that can be used by a variety of programs.

The object structure of the DOM is represented by what is called a tree of nodes. It is so called because it can be thought of as a tree with a single parent trunk that branches into several child branches, each of which may have leaves. In this case, the parent “STEM” is the root element, the child “branch” is the nested element, and the “leaves” is the content within the element.

Let’s take this HTML document as an example:

<! doctype html> <html lang="en"> <head> <title>My first web page</title> </head> <body> <h1>Hello, world! </h1> <p>How are you? </p> </body> </html>Copy the code

This document can be represented as the following node tree:

What is DOM not?

In the example I gave above, the DOM appears to be a one-to-one mapping of the source HTML document or DevTools as you see it. But, as I mentioned, there are differences. To fully understand what DOM is, we need to look at what it is not.

The DOM is not your source HTML

Although the DOM is created from the source HTML document, it is not always the same. In both cases, the DOM may differ from the source HTML.

  • When the HTML is invalid

The DOM is the interface to a valid HTML document. During DOM creation, the browser may correct some of the invalid content in the HTML code. Let’s take this HTML document as an example:

<! doctype html> <html> Hello, world! </html>Copy the code

The document is missing and elements, which are required for valid HTML. If we look at the generated DOM tree, we will see that it has been corrected:

  • When you modify the DOM using Javascript

In addition to serving as an interface to view the content of an HTML document, you can modify the DOM to make it an active resource.

For example, we can use Javascript to create additional nodes for the DOM.

var newParagraph = document.createElement("p");
var paragraphContent = document.createTextNode("I'm new!");
newParagraph.appendChild(paragraphContent);
document.body.appendChild(newParagraph);
Copy the code

This will update the DOM, but of course not our HTML files.

DOM is not what you see in the browser (i.e., render tree)

What you see in the browser viewport is the render tree, which, as I mentioned, is a combination of DOM and CSSOM. What really distinguishes the DOM from the render tree is that the latter consists only of what will eventually be drawn on the screen.

Because the render tree is only concerned with what is rendered, it excludes visually hidden elements. For example, an element with a style associated with display: None.

<! doctype html> <html lang="en"> <head></head> <body> <h1>Hello, world! </h1> <p style="display: none;">How are you? </p> </body> </html>Copy the code

The DOM will contain the following

elements:

However, the rendered tree (and therefore the tree seen in the viewport) will not contain this element.

DOM is not in DevTools

The difference is much smaller, because the DevTools element inspector provides the closest approximation to the DOM in the browser. However, the DevTools inspector contains additional information that is not in the DOM.

The best example is CSS pseudo-elements. Pseudo-elements created using ::before and :: After selectors form part of the CSSOM and render tree, but are not technically part of the DOM. This is because the DOM is built only from the source HTML document and does not include styles applied to elements.

Although the pseudo-elements are not part of the DOM, they are in our DevTools element inspector.

conclusion

DOM is the interface to an HTML document. Browsers use it as the first step in determining what to render in the viewport, and Javascript programs use it to modify the content, structure, or style of a page. Although similar to other forms of source HTML documents, DOM differs in a number of ways:

  • It is always valid HTML
  • This is an activity model that can be modified through Javascript
  • It contains no pseudo-elements (e.g. :after)
  • It does contain hidden elements (for example, with display: None)

reference

What, exactly, is the DOM?