Level 1 · Complete beginner · 10 min
What the DOM Really Is
Learn what the DOM is: a live, in-memory tree of your page that JavaScript can read and change.
What you will learn
- Explain what the DOM is in plain English
- Describe how the browser turns HTML into the DOM tree
- Understand the difference between HTML source and the live DOM
- Open and read the DOM using browser DevTools
The idea
When your browser loads an HTML page, it does not just display the text file. It builds a live, in-memory model of the page called the Document Object Model (DOM). Every tag becomes an object your code can touch: read, change, delete, or create new ones.
Why does this matter?
Without the DOM, JavaScript could not make pages interactive. Every button click, every dropdown, every live-updating counter you have ever used works because JavaScript can read and change the DOM after the page has loaded.
A real-world analogy
Think of your HTML file as a blueprint for a house. The DOM is the actual, built house standing in front of you. You can walk in and move furniture (change the DOM) without ever touching the original blueprint (the HTML file on disk).
See it in code
console.log(document); console.log(document.title); console.log(document.body);
Line by line
console.log(document);document is the root object representing the whole page - your entry point into the DOM.
console.log(document.title);Reads the current page title, taken from the <title> tag but live and changeable.
console.log(document.body);Gives you the <body> element object, the container for everything visible.
What do you think happens?
If JavaScript changes the DOM, what happens to the original HTML file on the server?
Have a guess before you read on. Guessing wrong is part of learning it.
Try it yourself
Open any webpage, open DevTools (F12), go to the Console tab, and type document.title then document.body. Try changing document.title = "Hello" and watch the browser tab update instantly.
Worth knowing
Common mistake: thinking 'view page source' shows the DOM. It does not - it shows the original HTML as downloaded. To see the live DOM, use the Elements/Inspector tab in DevTools, which updates as JavaScript changes things.
The proper words for it
- DOM
- Document Object Model - the browser's live, in-memory tree representation of a web page.
- Node
- Any single item in the DOM tree - an element, a piece of text, or a comment.
- document
- The global JavaScript object representing the whole loaded page.
Where you'll meet this
Every framework you will ever use - React, Vue, Svelte - ultimately produces DOM changes under the hood. Understanding the raw DOM makes debugging any framework easier because you know what is really happening in the browser.
Lesson recap
- The DOM is a live tree built from your HTML, kept in browser memory
- JavaScript reads and changes the DOM, not the original HTML file
- document is your entry point into the DOM
- DevTools Elements tab shows the live DOM, not the source file
Still fuzzy on any of this?
That's normal, and it's not a dead end. Pick a different way to hear it.
Quick check
1. What does DOM stand for?
2. When JavaScript changes the DOM, what happens to the original .html file?
3. Which DevTools tab shows the live DOM, including JS changes?
Filter a Node Tree
The DOM is really just a tree of nested objects. Here a "node" is a plain object { tag, id, children }, where children is an array of more nodes (empty array for leaves).
Write findNodesByTag(tree, tag) that walks the whole tree (the root and all descendants) and returns an array of the id values of every node whose tag matches, in depth-first, top-to-bottom order (a node is checked before its children).