🎄 Get 20% off from our HTML course for the holidays! 🎄
What is the DOM, Actually?

What is the DOM, Actually?

Understanding the Document Object Model in and out
Ferenc Almasi • Last updated 2021 November 11 • Read time 6 min read
There are more than 1.5 billion active websites on the internet all made up of the same model; the Document Object Model or DOM for short. What is it?
  • twitter
  • facebook
HTML

At the writing of this article, there are more than 1.5 billion active websites on the internet with new sites popping up every second. They are all made up of the same model; the Document Object Model.

the number of active websites on the internet

One of the core steps that is responsible for rendering a website to your screen. To better understand the DOM, you first have to understand how websites are rendered.

How web pages are rendered?

To give you a brief overview, the steps it takes to turn HTML, CSS, and JavaScript into Facebook, Twitter, or Medium is called the “Critical Rendering Path”, or CRP for short.

It is made up of 5 different steps, each one building on top of the previous one.

the different steps of the critical rendering path

The very first step of the CRP is about constructing the DOM from the HTML markup you write.

So does that mean that HTML and the DOM are not the same? Is there a difference at all?


What is the difference between HTML and the DOM?

You might be thinking that the DOM equals to the HTML you write or you see when you inspect the source of a website. This is however not the case. You may also be tempted to say that it is then must be the “Elements” panel in DevTools. But this is only partially true.

DOM in DevTools

While DevTools certainly provides a great way to visualize the DOM, it actually does more than that. It also provides additional information on pseudo-elements that are technically not part of the DOM.

They are added through CSS. Since they are not part of the DOM, this also means you can’t modify them directly through JavaScript. However, there is a workaround to read values from pseudo-elements.

For example, you can use the code below to get the content of a ::before element on .pseudo.

Copied to clipboard!
// Get the content of the :before element on .pseudo
window.getComputedStyle(document.querySelector('.pseudo'), ':before').getPropertyValue('content');
pseudo.js

So even though the DOM looks exactly like the HTML you write, it is more than that. Imagine you forgot to close one of your tags in your HTML markup, or you completely omit a required tag, such as your <head>. If you take a look at this document in DevTools, you’ll notice the tag has been automatically inserted for you. The browser corrected the invalid HTML during DOM creation.

The DOM corrects invalid HTML elements
The DOM corrects invalid HTML markup

How DOM is Created?

When the browser constructs the Document Object Model, it goes through five different steps. At the end of the fifth step, you get the DOM. Let’s see the responsibilities of each steps:

1. Reading

First, your browser reads in your HTML file that it receives from a server or from your local machine. At this stage, the file is nothing more than a string of bytes.

reading in bytes of data

2. Conversion

Next, the bytes are converted into characters based on a specified encoding you provide in your <meta charset="..." /> attribute. This is usually set to UTF-8. At the end of this step, you get back the same version of your file you’ve just created locally.

converting bytes into characters

3. Tokenization

After this, the browser can start creating tokens for valid HTML elements — that are specified in the HTML standard — such as your <head> or your <body>. Each of these tokens will have its own rules.

creating tokens from the characters

4. Lexing

At this stage, the tokens are converted into objects that define their set of properties.

converting tokens into objects

If you use console.dir, you can log out the properties of a DOM element to the console.

Logging out the properties of a DOM element in DevTools

5. Creating the DOM

Lastly, the different objects are linked together into a tree structure that defines the relationship between each of the elements. Now we also know the parents or children of each element. The output of this final step is the Document Object Model.

Creating the DOM as a last step of DOM construction

Putting everything together, these are the steps required for the browser to construct the DOM:

The five steps of how the DOM is created
Looking to improve your skills? Check out our interactive course to master HTML from start to finish.
Master HTML Remove ads

What DOM Can Be Used For?

So what is the use of the DOM? What can we use it for? As mentioned before, when the browser constructs the DOM, it does a great way of validating invalid elements. However, this is not an encouragement to write invalid HTML. More importantly, the DOM functions as an API that can be used to manipulate HTML.

Manipulating the DOM through JavaScript

When you modify an element inside the HTML, you not directly making changes to the HTML file. Instead, you are interacting with the DOM that in return changes your elements.

Copied to clipboard!
document.querySelector('h1').innerText = 'âť—';
document.querySelector('h1').style.backgroundColor = '#FF0';
document.querySelector('h1').dataset.type = 'marked';
dom.js
The result of modifying the DOM in JavaScript

You can also use JavaScript to dynamically create new HTML elements and attach it to the DOM that has already been created by the browser.

Copied to clipboard!
const subHeading = document.createElement('h2');

subHeading.innerText = 'đź‘‹';
document.body.appendChild(subHeading);
dynamic-element.js

Lastly, you can not only create individual elements through JavaScript, but you can also create an entire DOM inside your document. This is called shadow DOM.

What is a shadow DOM?

The shadow DOM is used for encapsulation. It is an important part of web components. You can use it to keep your structure, your styles, and the behavior associated with it separate from your main document.

image about open and closed shadow DOM

In order to create a shadow DOM, all you have to do is call attachShadow on a DOM element.

Copied to clipboard!
document.querySelector('h1').attachShadow({ mode: 'open' });
shadow.js

The mode can be either open or closed. If you choose

  • open: You can access the shadow DOM with JavaScript in the context of your main document.
  • closed: You won’t be able to access the shadow DOM from the outside.
The return value of a closed versus an open shadow DOM
The return value of a closed versus an open shadow DOM

As you can see, this is not the actual DOM your browser renders, but only a part of it. It is always attached to a regular DOM node.


So What is DOM, Actually?

To summarize, the Document Object Model — or DOM for short — is an interface to the HTML documents you write. It is a tree-structured model that is made up of nodes. Each node in the tree is an object, representing each of your HTML elements.

Essentially, it is an API for your document that you, and other programs can use to read and write every aspect of it.


Summary

If you would like to dive further deep into the technicalities of the DOM, make sure to check out this introduction by MDN web docs. It provides further examples of how to access the DOM or what are the fundamental data types that are associated with it.

Do you already have deep experience in the DOM? If so, what are your go-to tips for beginners? Let us know in the comments! Thank you for reading through, happy coding!

Would you like to learn more about HTML? Check out these 10 best practices to take your skills to the next level:

10 Best Practices for HTML
Did you find this page helpful?
📚 More Webtips
Frontend Course Dashboard
Master the Art of Frontend
  • check Access exclusive interactive lessons
  • check Unlimited access to hundreds of tutorials
  • check Remove ads to learn without distractions
Become a Pro

Recommended