What is the DOM, Actually?
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.
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 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.
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.
// Get the content of the :before element on .pseudo
window.getComputedStyle(document.querySelector('.pseudo'), ':before').getPropertyValue('content');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.
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.
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.
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.
4. Lexing
At this stage, the tokens are converted into objects that define their set of properties.
If you use console.dir, you can log out the properties of a DOM element to the console.
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.
Putting everything together, these are the steps required for the browser to construct the DOM:
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.
document.querySelector('h1').innerText = 'âť—';
document.querySelector('h1').style.backgroundColor = '#FF0';
document.querySelector('h1').dataset.type = 'marked';
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.
const subHeading = document.createElement('h2');
subHeading.innerText = 'đź‘‹';
document.body.appendChild(subHeading);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.
In order to create a shadow DOM, all you have to do is call attachShadow on a DOM element.
document.querySelector('h1').attachShadow({ mode: 'open' });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.
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:
Unlimited access to hundred of tutorials- Access to exclusive interactive lessons
- Remove ads to learn without distractions
