> ## Documentation Index
> Fetch the complete documentation index at: https://js.maxbraglia.com/llms.txt
> Use this file to discover all available pages before exploring further.
# What is the DOM
> Understand how browsers represent web pages as a tree of objects you can manipulate
## The page is a tree of objects
When a browser loads an HTML file, it doesn't just display text. It parses the HTML and builds an in-memory tree of objects called the **Document Object Model** (DOM). Every HTML element becomes a JavaScript object you can read, modify, and delete.
```html theme={null}
My App
Hello
Welcome to my app
```
The browser turns this into a tree:
```
document
└── html
├── head
│ └── title
│ └── "My App"
└── body
├── h1
│ └── "Hello"
└── p
└── "Welcome to my app"
```
Every box in this tree is a **node**. Elements, text, and even comments are nodes. JavaScript can access and change any of them.
## The `document` object
`document` is your entry point to the DOM. It's a global object available in any browser JavaScript — you don't need to import anything.
```javascript theme={null}
// The whole page
console.log(document);
// The element
console.log(document.documentElement);
// The element
console.log(document.head);
// The element
console.log(document.body);
// The page title
console.log(document.title); // "My App"
document.title = "New Title"; // Changes the browser tab title
```
`document` is only available in the browser. If you try to use it in Node.js, you'll get `ReferenceError: document is not defined`. This is a browser-only API.
## What can you do with the DOM?
The DOM lets JavaScript interact with the page:
| Action | Example |
| --------------------- | ------------------------------------------- |
| **Find** elements | `document.querySelector(".user-card")` |
| **Read** content | `element.textContent` |
| **Change** content | `element.textContent = "New text"` |
| **Change** styles | `element.style.color = "red"` |
| **Add** elements | `parent.appendChild(newElement)` |
| **Remove** elements | `element.remove()` |
| **Listen** for events | `button.addEventListener("click", handler)` |
This is how JavaScript makes web pages interactive. Without the DOM, a page would be static HTML — no clicking, no updating, no fetching data and displaying it.
## How this connects to React
Here's the key insight: **React is a DOM manipulation library**. Everything React does — rendering components, updating the UI, handling events — ultimately translates to DOM operations.
```javascript theme={null}
// Vanilla JavaScript (what we'll learn in this section)
const heading = document.querySelector("h1");
heading.textContent = "Hello, Sarah!";
// React (what you'll learn later) — does the same thing under the hood
function Greeting() {
return Hello, Sarah!
;
}
```
React abstracts away manual DOM manipulation so you don't have to do it yourself. But understanding the DOM helps you:
* Debug React applications (the Elements panel shows the real DOM)
* Understand why React re-renders
* Work with libraries that touch the DOM directly
* Handle edge cases React can't cover
You don't need to master manual DOM manipulation to use React. But understanding what's happening underneath makes you a better React developer. Think of this section as learning what your car engine does — you don't need to rebuild it, but knowing how it works helps when something goes wrong.
## DOM vs HTML
The DOM is not your HTML file. The browser builds the DOM *from* your HTML, but they can differ:
```html theme={null}
```
```javascript theme={null}
// JavaScript adds content that wasn't in the original HTML
const app = document.querySelector("#app");
app.innerHTML = "Hello!
This wasn't in the HTML file
";
```
After this JavaScript runs, the DOM has an `h1` and `p` inside `#app`, but the HTML file still just says ``. The DOM is the **live, current state** of the page.
When you "View Source" in the browser, you see the original HTML. When you inspect with DevTools, you see the current DOM. They're often different because JavaScript modifies the DOM after the page loads.
## What's next?
Now that you know what the DOM is, let's learn the tool you'll use every day to inspect and debug it — browser DevTools.
Inspect, debug, and test your JavaScript in the browser