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:

1<!DOCTYPE html>
2<html>
3  <head>
4    <title>My Page</title>
5  </head>
6  <body>
7    <h1>Hello</h1>
8    <p>World</p>
9  </body>
10</html>

It creates a tree structure:

1Document
2  └── html
3        ├── head
4        │     └── title
5        │           └── "My Page" (text node)
6        └── body
7              ├── h1
8              │     └── "Hello" (text node)
9              └── p
10                    └── "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 
Document node — The root of the tree (document)

1const heading = document.querySelector('h1');
2
3heading.nodeType; // 1 (Element node)
4heading.firstChild.nodeType; // 3 (Text node)
5heading.nodeName; // "H1"

Navigating the tree

You can move through the DOM tree using these properties:

1const body = document.body;
2
3// Children
4body.children; // all child elements
5body.firstElementChild; // first child element
6body.lastElementChild; // last child element
7
8// Parent
9body.parentElement; // <html>
10
11// Siblings
12const h1 = document.querySelector('h1');
13h1.nextElementSibling; // <p>
14h1.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:

1// Add a new element
2const newDiv = document.createElement('div');
3newDiv.textContent = 'I am new!';
4document.body.appendChild(newDiv);
5
6// 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.

Finished reading?

Mark this topic as solved to track your progress.

What is the DOM structure?