Intro to the DOM
The Big Idea
The DOM is a tree-shaped representation of your HTML page that JavaScript can read and change. Every element on your page — headings, paragraphs, buttons — is a node in that tree. Understanding this structure is the foundation for making web pages interactive.
Your Roadmap
| Section | Time | Required? |
|---|---|---|
| What is the DOM? | 10 min | ⚑ Required |
| The document object | 10 min | ⚑ Required |
| Check your understanding with a chatbot | 15 min | ⚑ Required |
What is the DOM?
HTML and CSS are two of the fundamental languages of the web. The Document Object Model (DOM) provides the means to interact with objects in an HTML document using JavaScript.
When you load a page in a browser, the browser reads your HTML and builds a tree of objects from it. Each element becomes a node. Nodes have parents, children, and siblings — just like a family tree. JavaScript can then navigate that tree to find elements and change them.
Figure 1: A simplified view of the 'document' object.
In the example above, the <body> element has 2 children, an <img> element, and a <p> element. The text in the <p> element is a child of that <p> and so can be accessed and manipulated directly.
The document object
Browsers give you a built-in JavaScript object called document. It represents the entire page and is the entry point to everything in the DOM.
At the very top of the tree sits the window object — it represents the browser tab itself. The document object lives inside window and represents your page. For now, document is all you need to work with.
Try it now:
- Open Chrome
- Press
Command+Option+J(Mac) orControl+Shift+J(Windows/Linux) to open the console - Type
document.(include the period) and pause
Chrome will show a long list of properties and methods — these are everything you can do with the DOM.
Figure 2: The properties and methods available on the 'document' object.
Check your understanding with a chatbot
Step 1 — Set the scene:
"I just read an introduction to the DOM. I want you to check my understanding by asking me questions — don't explain anything yet, just ask."
Step 2 — Answer in your own words. Don't look anything up. It's fine to say "I'm not sure."
Step 3 — Fill the gaps:
"Based on my answers, what's the one concept I'm most unclear on? Explain just that one thing in plain language with an analogy."
Step 4 — Check your analogy:
"I think the DOM is like [your analogy]. Is that accurate? What does my analogy miss?"
How to know you've nailed it
| Level | You can... | ||
|---|---|---|---|
| 🪨 | Intro Climb | Explain what the DOM is in one sentence | ⚑ Required |
| 🧗 | Core Ascent | Describe the DOM as a tree and explain what the document object is | ⚑ Required |
| 🏔️ | Summit | Explain the relationship between window, document, and the HTML elements on a page | ◎ Optional |
The Big Idea (revisited)
The DOM is a tree of objects that the browser builds from your HTML. JavaScript uses the document object to navigate and change that tree. Every interactive web page you have ever used works by reading and modifying the DOM.