What data structure is used to represent the DOM?

JavaScript

Data structure of DOM

The Document Object Model (DOM) is represented using a tree data structure, specifically a type of tree called a node tree. This representation is fundamental to how web browsers interpret and render HTML documents.

Understanding the DOM Tree 🌲

When a browser loads an HTML document, it parses the markup and creates a hierarchical tree-like structure in memory. This tree has several key characteristics:

Node-based hierarchy: Every element in an HTML document becomes a node in this tree.
Parent-child relationships: Elements nested inside other elements establish parent-child relationships in the tree.
Tree root: The entire structure begins with a root node, which is the document object.
Different node types: The DOM tree contains various types of nodes, including:
- Element nodes (representing HTML tags like <div>, <p>, etc.)
- Text nodes (containing the text between tags)
- Attribute nodes (representing element attributes)
- Comment nodes (for HTML comments)
- Document nodes (the root of the tree)

Visualizing the DOM Tree 🌲

Consider this simple HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <div>
      <p>This is a paragraph.</p>
    </div>
  </body>
</html>

The corresponding DOM tree would look like

document (document node)
└── html (element node)
    ├── head (element node)
    │   └── title (element node)
    │       └── "Sample Page" (text node)
    └── body (element node)
        ├── h1 (element node)
        │   └── "Hello World" (text node)
        └── div (element node)
            └── p (element node)
                └── "This is a paragraph." (text node)

00:00

Data structure of DOM
Understanding the DOM Tree 🌲
Visualizing the DOM Tree 🌲

What data structure is used to represent the DOM?

Data structure of DOM

Understanding the DOM Tree 🌲

Visualizing the DOM Tree 🌲

Table of Contents