What is the DOM tree?

JavaScriptJunior~2 min read

The DOM (Document Object Model) is the object model of an HTML document, that is, the structure of a web page as a tree of objects that JavaScript can work with.

Example:

Here is a simple HTML page:

javascript

<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

When the browser loads this page, it converts the HTML into a DOM tree:

javascript

Document
└── html
    └── body
        ├── h1
        │   └── "Hello"
        └── p
            └── "World"

In other words, the DOM is the browser's in-memory representation of the HTML page, where each tag is an object, and the nesting of tags is a hierarchy (a tree).

How the DOM differs from HTML

Difference	HTML	DOM
What it is	Text code (markup)	The document's object model
Where it exists	In a file (`.html`)	In the browser's memory
Format	Strings (tags, attributes)	Objects (nodes, properties, methods)
Changed by JS	No (HTML is a static file)	Yes, the DOM can be changed dynamically
Example	`<p>Hello</p>`	`document.querySelector('p').textContent = 'Hi'`

In other words:

HTML is the source code of the page.
DOM is the live structure the browser and JavaScript work with.

Types of nodes in the DOM

Every element of the DOM tree is a node. There are several types of nodes:

Node type	Example	Description
`Document`	`document`	The root of the tree
`Element`	`<div>`, `<p>`	HTML tags
`Text`	`"Hello"`	Text inside tags
`Comment`	`<!-- comment -->`	Comments
`Attribute`	`class="title"`	Element attributes

Working with the DOM through JavaScript

1. Getting elements

javascript

document.getElementById('id');
document.getElementsByClassName('class');
document.getElementsByTagName('p');
document.querySelector('.class');
document.querySelectorAll('p');

The modern ways are querySelector() and querySelectorAll().

2. Changing content

javascript

const el = document.querySelector('h1');

el.textContent = 'Hello, world!';   // Changes the text
el.innerHTML = '<em>Hello!</em>'; // Inserts HTML

3. Changing attributes and styles

javascript

el.id = 'title';
el.setAttribute('data-role', 'main');
el.style.color = 'red';
el.classList.add('active');

4. Creating and adding elements

javascript

const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new block';
document.body.appendChild(newDiv);

You can create, insert, and remove nodes, thereby dynamically changing the page.

5. Removing elements

javascript

const p = document.querySelector('p');
p.remove();

6. Navigating the tree

javascript

const el = document.querySelector('div');
el.parentElement;  // parent
el.children;       // child elements
el.firstElementChild; // first descendant
el.nextElementSibling; // adjacent element

Example: dynamically changing a page

javascript

<ul id="list">
  <li>JS</li>
  <li>HTML</li>
</ul>

<script>
  const list = document.getElementById('list');
  const li = document.createElement('li');
  li.textContent = 'CSS';
  list.appendChild(li);
</script>

Now the list will become:

javascript
JS HTML CSS

Summary

Parameter	HTML	DOM
What it is	Document markup	An in-memory structure
Format	Text (tags)	Objects
Changed by JS	No	Yes
Where it exists	On disk (a file)	In the browser (in memory)
Interaction	Only parsed	You can read, change, remove nodes

In short:

The DOM is the "live" version of HTML that JavaScript works with. It represents the page as an object tree, where nodes can be read, changed, and removed.

A formula to remember it by: HTML is text, DOM is a structure of objects, JS is the tool for managing that structure.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.