DOM in js
1. What is the DOM?
DOM = Document Object Model
It is a tree-like structure that represents your web page.
The browser converts your HTML into this object tree so that JavaScript can interact with it.
Think of DOM as a bridge between HTML and JavaScript.
👉 HTML is static text, but once loaded, the browser creates a live object model (DOM) that JS can manipulate.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Hello DOM</h1>
<p>This is a paragraph.</p>
</body>
</html>
DOM Tree looks like:
Document
└── html
├── head
│ └── title ("My Page")
└── body
├── h1 ("Hello DOM")
└── p ("This is a paragraph.")
Key Points about DOM:
Document: root of everything.
Element Nodes: tags (
<body>,<h1>).Text Nodes: text inside tags.
Attributes: (
id,class, etc.) also nodes in DOM.
2. How Browser Reads Things (Rendering Pipeline)
When you type a link (like https://google.com) in the browser, here’s what happens:
Step 1: URL → Request
You type URL → Browser sends a request to server.
Server responds with HTML.
Step 2: HTML Parsing → DOM
Browser reads HTML line by line (top to bottom).
Creates DOM Tree.
Step 3: CSS Parsing → CSSOM
Browser reads CSS (inline,
<style>, or external files).Creates CSS Object Model (CSSOM).
Example:
h1 {
color: red;
}
Becomes part of CSSOM tree.
Step 4: DOM + CSSOM → Render Tree
Browser merges DOM (structure) + CSSOM (styles).
Render tree tells: what to show, where, and how.
Step 5: Layout
Browser calculates position & size of each element.
Example: where
<h1>appears, how wide<div>is.
Step 6: Paint
- Browser fills pixels with colors, borders, text, images.
Step 7: Composite
- Browser puts everything together → Final page displayed.
⚡ Important Note:
JavaScript can pause this process.
If there’s a
<script>tag in the HTML, browser pauses parsing until the script is loaded & executed.That’s why we often put
<script>at the bottom or usedefer/async.
3. How JS interacts with DOM
JavaScript can:
Select elements:
document.querySelector("h1");Change text:
document.querySelector("h1").textContent = "Changed!";Change style:
document.querySelector("h1").style.color = "blue";Add/remove elements:
let p = document.createElement("p"); p.textContent = "New paragraph"; document.body.appendChild(p);
So the DOM is live & dynamic.
4. Full Flow Recap (When you load a page)
Enter URL → DNS Lookup → Server responds with HTML.
HTML parsed → DOM built.
CSS parsed → CSSOM built.
DOM + CSSOM → Render Tree.
Layout → Calculate positions & sizes.
Paint → Fill pixels.
Composite → Show final page.
JS can manipulate DOM anytime (causing reflows/repaints).