JavaScript Fundamentals · DOM · Lesson 22 of 48
What is the DOM?
Concept
What is the DOM?
The DOM is the browser's live representation of your HTML page as a tree of objects that JavaScript can read and change.
Because it's live, changes you make through JavaScript show up on the page immediately — the DOM isn't a static copy of your HTML, it IS what the browser is currently displaying.
By the end of this lesson
- Explain the core idea behind What is the DOM?.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
Syntax
document.title
document.body
document.documentElementThe DOM as a tree
// <html>
// <body>
// <h1>Title</h1>
// <p>Text</p>
// </body>
// </html>
// Each tag becomes a connected "node" JavaScript can reach.Self-check before continuing
Without looking at the example, describe what changes when you modify one input in What is the DOM?. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Log document.title in your own browser console and see what you get.
Loading editor…
Console