DOM Tree

A DOM tree is a hierarchical representation of an HTML or XML document created by the browser.

Each part of the document becomes a node in the tree, including elements, text, and attributes. This structure allows JavaScript and other tools to access, inspect, and modify webpage content dynamically.

Also known as: Document tree, DOM structure.

How Does a DOM Tree Work?

When a browser loads a webpage, it parses the document and converts its structure into a tree of connected nodes.

For example:

<html>
  <body>
    <div>
      <p>Hello</p>
    </div>
  </body>
</html>

The resulting structure can be viewed conceptually as:

Document
└── html
    └── body
        └── div
            └── p
                └── "Hello"

Each node has a position in the hierarchy and may contain child nodes or be connected to a parent node.

This tree structure makes it possible for scripts to navigate from one element to another and update the document while the page is running.