The DOM tree

JavaScriptJunior~3 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. Every tag becomes an object, and the nesting of tags turns into a hierarchy of nodes.

Theory

TL;DR

The DOM is the internal representation of a page in the browser's memory, not the HTML file itself.
Every tag is an object (a node), and tag nesting is a tree.
HTML is static, the DOM is dynamic: JavaScript can read, change, create and delete nodes.
Node types: Document, Element, Text, Comment, Attribute.
The modern ways to find nodes are querySelector() and querySelectorAll().
A change to the DOM shows up on the page immediately, while the HTML file stays untouched.

Quick example

A simple HTML page:

html

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

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

text

Document
+-- html
    +-- body
        +-- h1
        |   +-- "Hello"
        +-- p
            +-- "World"

So the DOM is the representation of the HTML page in the browser's memory, where each tag is an object and the nesting of tags is a hierarchy.

How the DOM differs from HTML

Difference	HTML	DOM
What it is	Text code (markup)	The object model of the document
Where it lives	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, while the DOM is the live structure the browser and JavaScript work with.

Node types in the DOM

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

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 from 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 appending elements

javascript

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

Nodes can be created, inserted and removed, which is how a page is changed dynamically.

5. Removing elements

javascript

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

6. Navigating the tree

javascript

const el = document.querySelector('div');
el.parentElement;       // the parent
el.children;            // the child elements
el.firstElementChild;   // the first child
el.nextElementSibling;  // the next sibling

Changing a page dynamically

html

<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>

The list now looks like this:

text

JS
HTML
CSS

Summary:

Property	HTML	DOM
What it is	Document markup	A structure in memory
Format	Text (tags)	Objects
Changed by JS	No	Yes
Where it exists	On disk (a file)	In the browser (in memory)
Interaction	It is only parsed	Nodes can be read, changed and deleted

In short: the DOM is the live version of the HTML that JavaScript works with. It presents the page as a tree of objects whose nodes can be read, changed and deleted. A formula to remember: HTML is text, the DOM is a structure of objects, JS is the tool that drives that structure.

Common mistakes

Confusing HTML and the DOM. Changing the DOM from JavaScript does not change the .html file on the server; a reload brings everything back to the original state.
Assuming the DOM is an exact copy of the markup. The browser fixes broken markup and inserts missing tags (html, body, tbody), so the tree can differ from what you wrote.
Forgetting about text nodes. Whitespace and line breaks between tags are nodes too, so firstChild often returns text rather than an element. Use firstElementChild for elements.
Using innerHTML for user data. That is the road to XSS; use textContent for text.
Looking for an element before it has been parsed. A script in <head> without defer runs before the markup exists, and querySelector returns null.
Mutating the DOM node by node in a loop. Every insertion forces the browser to recalculate layout; collect the nodes in a DocumentFragment and insert them once.

Short Answer

Interview ready

Premium

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