🧠 The DOM | Notion

🚀 What is the DOM?

DOM stands for Document Object Model.

Don't let the name scare you. In simple terms, the DOM is a live map of a webpage. When a browser loads an HTML file, it creates this map so that programming languages like JavaScript can understand and change the page.

Think of it like this:

HTML is the original blueprint for a building.
The DOM is the actual, living building that you can walk through and change.

🛠️ Seeing the DOM: `Inspect` vs. `View Source`

This is the most important difference to understand. They are not the same thing.

`view-source`

This shows you the original blueprint. It's the raw, untouched HTML code exactly as it was sent from the server. It has no idea that JavaScript even exists. It is static.

`Inspect` (The `Elements` Tab)

This shows you the live building. It's the current, active state of the webpage after JavaScript has run, made changes, added things, or removed things. It is dynamic.

Feature	`view-source`	`Inspect` (The Live DOM)
What is it?	The raw HTML file from the server.	The live, in-memory map of the page.
Timing	Before JavaScript runs.	After JavaScript runs.
State	Static (Never changes)	Dynamic (Changes in real-time)
Use Case	See the original code.	Debug and see the final result.

🎨 Structure vs. Style: The DOM, HTML, & CSS

So, where do HTML and CSS fit into the DOM you see in the Inspect tool?

HTML is the Structure

The nested HTML tags you see in the Elements tab are the visual representation of the DOM. Each tag is an "object" or a "node" on the map. They are the skeleton.

CSS is the Style

The CSS is NOT part of the DOM itself. CSS is a separate set of rules that are applied to the DOM elements to give them style.