What is the DOM structure?

JavaScript

The short answer

The DOM (Document Object Model) is a tree-like representation of an HTML document. The browser parses the HTML and creates a tree of objects (nodes) that JavaScript can read and modify. Every HTML element becomes a node in this tree, with parent-child relationships matching the nesting of the HTML.

How HTML becomes the DOM

When the browser receives HTML like this:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

It creates a tree structure:

Document
  └── html
        ├── head
        │     └── title
        │           └── "My Page" (text node)
        └── body
              ├── h1
              │     └── "Hello" (text node)
              └── p
                    └── "World" (text node)

Every element, piece of text, and even comments become nodes in this tree.

Types of nodes

The most common node types are:

  • Element nodes — HTML elements like <div>, <p>, <span>
  • Text nodes — The text content inside elements
  • Comment nodes — HTML comments <!-- like this -->
  • Document node — The root of the tree (document)
const heading = document.querySelector('h1');
heading.nodeType; // 1 (Element node)
heading.firstChild.nodeType; // 3 (Text node)
heading.nodeName; // "H1"

You can move through the DOM tree using these properties:

const body = document.body;
// Children
body.children; // all child elements
body.firstElementChild; // first child element
body.lastElementChild; // last child element
// Parent
body.parentElement; // <html>
// Siblings
const h1 = document.querySelector('h1');
h1.nextElementSibling; // <p>
h1.previousElementSibling; // null (h1 is first)

DOM is live

The DOM is a live data structure. When you change it with JavaScript, the page updates immediately:

// Add a new element
const newDiv = document.createElement('div');
newDiv.textContent = 'I am new!';
document.body.appendChild(newDiv);
// The page instantly shows the new div

This is what makes web pages interactive — JavaScript modifies the DOM, and the browser renders the changes.

Interview Tip

When explaining the DOM, describe it as a tree of objects that the browser creates from HTML. The key point is that the DOM is not the HTML itself — it is a live representation that JavaScript can read and modify. If you can draw a simple tree showing parent-child relationships, that makes the explanation very clear.

Why interviewers ask this

Understanding the DOM is fundamental for frontend development. Interviewers ask this to see if you know how the browser turns HTML into something JavaScript can work with, and if you understand the tree structure that makes traversal and manipulation possible.

Table of Contents