The DOM (Document Object Model) is a programming interface for HTML and XML documents.
When the web browser processes an HTML, internally (in memory) it creates a tree of nodes that represent the structure of the document.
This tree is what the browser uses to process, work with, and render each part of the document (elements, attributes, and text).
The DOM is the “standard” that this tree of nodes follows. It is a structured and hierarchical way to access and manipulate the content and structure of a web page.
In this way, it acts as the bridge between the content of a web page and programming languages that can manipulate it dynamically (for example, to change an element, add or remove one, etc).
DOM Structure
The basic structure of the DOM can be visualized as a tree with the root node (the document) at the top, and elements, attributes, and text as child nodes and sub-nodes.
For example, when the browser receives this HTML,
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<div id="content">
<h1>Hello, World!</h1>
<p>This is a text paragraph.</p>
</div>
</body>
</html>
The browser reads it, processes it, and in memory creates a DOM tree that we can represent like this,
🏠 Document/ └── 📦 html/ ├── 📦 head/ │ └── ✏️ title └── 📦 body/ └── 📦 div/ ├── 📄 id=“content” ├── ✏️ h1 └── ✏️ p
This is what the browser works with internally
Nodes in the DOM
As we said, everything within the DOM are nodes. But they can specialize into different types.
The main types of nodes in the DOM include:
| Node Type | Node Class | HTML Examples | Description |
|---|---|---|---|
| 🏠 Document | HTMLDocument | (the entire document) | The entire document. |
| 📦 Element | HTMLElement | <div>, <p>, <h1> | Each HTML tag. |
| 📄 Attribute | Attr | id="myDiv" | The attributes of elements. |
| ✏️ Text | Text | "Hello, World!" | The textual content of the element. |
| 💬 Comment | Comment | <!-- Comment --> | Comments in the HTML. |
In turn, the HTMLElement type can specialize into a different subtype. There is one for each HTML tag. I leave you a list of the main ones here 👇
What is the DOM for us
The DOM provides a way to interact with web documents from a programming language like JavaScript.
How the DOM is updated
Every time we perform an action on the DOM, the browser automatically updates each of the changes made by JavaScript.
For example, when we manipulate the DOM through methods like appendChild, removeChild, or innerHTML, the browser updates the visual representation of the document accordingly.
This is great, but in large and complex projects and applications, if we update many elements constantly, it can become a performance problem.
To improve this, there are several “tricks” we can do, such as
- Avoid frequent direct manipulations: Reduce the amount of direct access and modification to the DOM to improve performance.
- Use DOM fragments: Use
DocumentFragmentto make changes in a DOM fragment before adding it to the main DOM. - Alternative DOMs: Some frameworks use their own internal DOM, where they collect changes before sending them to the browser’s DOM.
