Language: EN
LuisLlamas Logo
Search
⏲️ ~ 5 minutes Intermediate
javascript-que-es-el-dom

What is the DOM of a Web

The DOM (Document Object Model) is a programming interface for HTML and XML documents.

When the web browser processes an HTML, it internally (in memory) 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 the programming languages that can dynamically manipulate it (for example, to change an element, add or remove one, etc.).

Structure of the DOM

The basic structure of the DOM can be visualized as a tree with the root node (the document) at the top, and the elements, attributes, and text as child nodes and subnodes.

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 have said, everything inside the DOM consists of nodes. But they can specialize in different types.

The main types of nodes in the DOM include:

Node TypeNode ClassHTML ExamplesDescription
🏠 DocumentHTMLDocument(the whole document)The entire document.
📦 ElementHTMLElement<div>, <p>, <h1>Each HTML tag.
📄 AttributeAttrid="myDiv"The attributes of the elements.
✏️ TextText"Hello, World!"The textual content of the element.
💬 CommentComment<!-- Comment -->The comments in the HTML.

In turn, the HTMLElement type can specialize into different subtypes. There is one for each HTML tag. Here is a list of the main ones 👇

Subtypes of HTMLElement
SubtypeDescription
HTMLAnchorElementAn anchor <a>, used to create hyperlinks.
HTMLDivElementA container <div>, used to group other elements.
HTMLImageElementAn image <img>, used to insert images into the document.
HTMLInputElementAn input field <input>, such as text fields, etc.
HTMLButtonElementA button <button>, which can be used to submit forms or execute scripts.
HTMLParagraphElementA paragraph <p>, which contains text or elements within a block of paragraph.
HTMLHeadingElementA heading (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>).
HTMLSpanElementAn inline container <span>
HTMLTableElementA table <table>.
HTMLTableRowElementA row of a table <tr>.
HTMLTableCellElementA cell within a table, either <td> or <th>.
HTMLFormElementA form <form>, used to collect user data.
HTMLSelectElementA select field <select>, which allows the user to choose from options.
HTMLOptionElementAn option within a <select> field, corresponding to the <option> tag.
HTMLTextAreaElementA text area <textarea>, which allows for multiline text input.
HTMLLinkElementA link <link>, used to link to external resources, such as stylesheets.
HTMLScriptElementA <script> tag, which is used to insert or reference JavaScript code.
HTMLAudioElementAn audio element <audio>, used to embed sound or music on the page.
HTMLVideoElementA video element <video>, used to embed videos on the page.
HTMLCanvasElementA canvas <canvas>, used to draw graphics using JavaScript.
HTMLDetailsElementThe <details> element, which allows for creating an interactive dropdown box.
HTMLSummaryElementThe header of the <details> element, used to show or hide the content.

What is the DOM useful for

The DOM provides a way to interact with web documents from a programming language like JavaScript.

For example, with the DOM we can

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 using 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 constantly update many elements, it can become a performance issue.

To improve it, 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 DocumentFragment to make changes to a fragment of the DOM 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.

On this page