The DOM Tree

Understand the Document Object Model. Learn how the browser transforms static HTML text into a living, branching data structure that JavaScript can interact with.

JavaScript6 min readConcept 40 of 62

The Bridge to HTML

JavaScript cannot directly read or modify the raw HTML text file sent by the server.

Instead, when the browser downloads your HTML, it parses it and builds a massive JavaScript object called the **Document Object Model (DOM)**. This DOM acts as a live, interactive bridge between your code and the screen.

The Tree Architecture

The DOM is structured as a massive, upside-down tree.

The global document object sits at the very top (the root). From there, it branches down into the <html> element, which branches into <head> and <body>, which branch into <div>, <h1>, and <p> elements. Every single piece of your website is a "node" on this tree.

Nodes vs Elements

It is important to understand the terminology:

An **Element** is a specific type of node that represents an HTML tag (like a <div>).

A **Text Node** is the actual text living inside that element. Even the invisible line breaks and spaces in your HTML file become Text Nodes in the DOM!

Visualizing the Tree

Compare the static HTML code on the left with the living DOM Tree that the browser constructs on the right.

The DOM Tree

<!-- The Text Blueprint -->
<html>
<head>
<title>Hello</title>
</head>
<body>
<h1>Hi</h1>
</body>
</html>
document
Root
<html>
Element
<head>
<title>
"Hello"
Text Node
<body>
<h1>
"Hi"
Text Node
iThe browser parses the flat HTML text file and constructs an upside-down tree. JavaScript uses the document object to climb down the branches and manipulate the Element and Text nodes.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is the relationship between HTML and the DOM?
  2. 2What sits at the very root of the DOM tree?
  3. 3Why is modifying the DOM considered computationally expensive?

Remember this

  • HTML is just text; the DOM is a live, interactive data structure.
  • The DOM is structured as an inverted tree.
  • The document object is the root of the tree.
  • HTML tags become Element Nodes; the text inside them becomes Text Nodes.
  • Interacting with the DOM is the slowest part of JavaScript execution.

Done with this concept?

Mark it complete to track your progress. No login needed.