Lesson 1
The DOM tree
Build a practical mental model for the dom tree and use it in working JavaScript.
By the end, you will be able to…
- Explain the dom tree in your own words
- Use the dom tree in a small program
- Recognize and debug a common failure mode
Build the mental model
The DOM represents an HTML page as a tree of nodes that JavaScript can read and change. Every element has a parent, and most have children, mirroring the nesting of the original HTML.
Syntax and working example
Read the code from inputs to output. Predict what it prints, then run it and change one value.
Why this matters
Every interactive web feature — a button that reacts to a click, text that updates — is JavaScript reading or rewriting a piece of this tree.
Real-world example
Browser DevTools' Elements panel is a live, interactive view of exactly this tree.
Common mistakes
- Assuming the DOM tree matches your source file structure exactly instead of the rendered output
- Forgetting scripts must often wait for the DOM to exist before querying it
- Confusing the DOM (a live object tree) with the original HTML source text
Try it yourself
Challenge
Given a simulated tree object, count how many direct children it has.
Knowledge check
What does the DOM represent?
Summary
The DOM is a tree of nodes mirroring your HTML; JavaScript reads and rewrites it to build interactivity.