preface

This article is translated. If you have any objections, please put forward suggestions for correction. Welcome to read it.

By Ire Aderinokun

What, exactly, is the DOM?

The body of the

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 do I build web pages?

How the browser goes from a source HTML document to displaying a styled interactive page in a view is called the “critical rendering path.” While this process can be broken down into several steps, these steps can be roughly divided into two stages, as I described in my article on understanding the critical rendering path. The first phase involves the browser parsing the document to determine what is ultimately rendered on the page, and the second involves the browser performing the rendering.

The result of the first stage is a so-called “render tree”. A render tree is a representation of HTML elements and their associated styles that will be rendered on a page. To build this tree, the browser needs two things:

  1. CSSOM, a representation of the style associated with the element
  2. DOM, the representation of the element

How do YOU create the DOM (and what does it look like)?

The DOM is an object-based representation of the source HTML document. As we’ll see below, it has some differences, but it 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 stem that can branch off into several sub-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 “leaf” is the content within the element.

Let’s take an HTML document as an example:


      
<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 some differences. To fully understand what DOM is, we need to understand what it is not.

DOM is not source HTML

Although the DOM is created from the source HTML document, it is not always the same. In both instances, the DOM can be different from the source HTML.

1. When HTML is invalid

The DOM is the interface to a valid HTML document. During DOM creation, the browser may correct some errors in the HTML code.

Let’s take this HTML document as an example:


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

The document is missing a and element, which is a requirement for valid HTML. If we look at the generated DOM tree, we’ll see that this has been corrected:

2. When the DOM is modified by 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 the HTML document.

DOM is not what you see in the browser (that is, render tree)

What you see in the browser view is the render tree, which, as mentioned earlier, is a combination of DOM and CSSOM. The REAL difference between the DOM and the render tree is that the latter contains only what will eventually be drawn on the screen.

Because the render tree only focuses on what is rendered, it excludes visually hidden elements. For example, have elements associated with the display: None style.


      
<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

elements:

However, the render tree, and what you see in the view, will not contain this element.

The DOM is not the DOM in DevTools

The difference is a bit small, 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 separately 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.

This is why Javascript cannot target pseudo-elements, because they are not part of the DOM.

review

DOM is the interface to an HTML document. Browsers use it as the first step in deciding what to render in a view, and through Javascript programs modify the content, structure, or style of the page.

While similar to other forms of source HTML documents, DOM is different in a number of ways:

  • It is always valid HTML
  • It is a living model that can be modified by Javascript
  • It contains no pseudo-elements (for example,::after)
  • It does contain hidden elements (for example,display: none)