DOM Introduction

1: HTML to Browser Pipeline in DOM

The browser directly cant understand when we write HTML, CSS, JS.

So the browser follows a pipeline to convert the code into a visual webpage.

Understanding the pipeline helps to understand:

• DOM
• CSSOM
• Rendering
• Reflow
• Repaint
• Browser Performance

The Big Question

Suppose:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

How does this become a webpage?

The answer is:

HTML
 ↓
Parsing
 ↓
Tokenization
 ↓
DOM Tree
 ↓
CSSOM Tree
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Screen

Complete Browser Pipeline

HTML File
     ↓
Parsing
     ↓
Tokenization
     ↓
DOM Tree
     ↓

CSS File
     ↓
Parsing
     ↓
CSSOM Tree

DOM + CSSOM
     ↓
Render Tree
     ↓
Layout
     ↓
Paint
     ↓
Screen

Real-Life Example of DOM

Imagine building a house.

HTML

Raw construction material.

Bricks
Doors
Windows

DOM Tree

It is the blueprint of the house.

Which room is connected to which room

CSSOM

Decoration instructions.

Wall colors
Furniture
Lighting

Render Tree

Final decorated house plan.

Layout

Measures the room sizes.

Paint

Actually paint and build everything.

Why This Pipeline Matters?

Every webpage goes through this process.

Examples:

• Google
• Facebook
• Amazon
• YouTube

All browsers perform this pipeline before showing the content.

Summary

Part 2: Parsing

Process where the browser reads the HTML document and understands its structure.

What is Parsing?

Parsing means: Reading the code and converting it into a structure the browser can understand.

Suppose browser receives:

<h1>Hello</h1>

Browser cannot immediately display it.

First it must understand:

This is a heading element
Its content is "Hello"

This is Parsing.

Parsing Flow

HTML Code
     ↓
Parser Reads Character by Character
     ↓
Creates Meaningful Pieces
     ↓
DOM Tree

Example

HTML:

<body>
  <h1>Hello</h1>
</body>

Parser reads:

<
body
>
<
h1
>
Hello
</h1>
</body>

And then understands the hierarchy.

Why Parsing is Important?

Without parsing:

<h1>Hello</h1>

This would simply be a text.

Browser won’t understand:

• Tag names
• Nesting
• Parent-child relationships

Important Point

The browser starts parsing HTML from top to bottom.

<body>
  <h1>Hello</h1>
  <p>Paragraph</p>
</body>

Order matters.

Summary

Part 3: Tokenization

Before building the DOM Tree, the browser converts HTML into tokens.

What is Tokenization?

Breaking HTML into small understandable pieces called Tokens.

Example

HTML:

<h1>Hello World</h1>

Browser breaks it into:

Start Tag Token → <h1>
Text Token → Hello World
End Tag Token → </h1>

Visual Flow

<h1>Hello</h1>
↓ Tokenization
[Start Tag h1]
[Text Hello]
[End Tag h1]

Types of Tokens

1. Start Tag Token

<div>

Token:

Start Tag: div

2. End Tag Token

</div>

Token:

End Tag: div

3. Text Token

Hello

Token:

Text: Hello

4. Attribute Token

<img src="image.jpg">

Tokens:

Tag: img
Attribute: src
Value: image.jpg

Why Tokenization Exists

Computers understand structured data better than raw text.

Instead of:

<div class="box">Hello</div>

Browser converts it into manageable pieces.

Summary

Part 4: DOM Tree

This is one of the most important concepts in Web Development.

What is DOM?

Document Object Model

It is a tree-like representation of an HTML document.

Why DOM Exists?

JavaScript cannot directly manipulate HTML.

Get Bikramjit Roy’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Instead:

HTML
 ↓
DOM
 ↓
JavaScript Manipulates DOM

Example

HTML:

<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

DOM Tree:

Document
  │
  └── html
       │
       └── body
             │
             ├── h1
             │     └── Hello
             │
             └── p
                   └── World

DOM Terminology

Parent Node

<body>
  <h1>Hello</h1>
</body>

body is parent of h1.

Child Node

h1 is child of body.

Sibling Node

<h1>Hello</h1>
<p>World</p>

h1 and p are siblings.

DOM is a Live Structure

JavaScript can change it anytime.

Example:

document.querySelector("h1").textContent = "Welcome";

DOM updates instantly.

Important Interview Point

DOM is not HTML.

HTML:

<h1>Hello</h1>

DOM:

{
  tagName: "H1",
  textContent: "Hello"
}

DOM is an object representation.

Summary

Part 5: CSSOM Tree

Just like HTML becomes DOM, CSS becomes CSSOM.

What is CSSOM?

CSS Object Model

It is a tree representation of CSS rules.

Example

CSS:

body {
  background: black;
}
h1 {
  color: white;
}

Browser converts it into: CSSOM

body
 └─ background: black
h1
 └─ color: white

Why CSSOM Exists?

Browser needs a structured way to understand CSS. Instead of reading raw text repeatedly.

CSS Parsing Flow

CSS File
     ↓
Parser
     ↓
Tokens
     ↓
CSSOM Tree

Example

h1 {
  color: red;
}

Converted to:

{
  selector: "h1",
  property: "color",
  value: "red"
}

Important Point

DOM contains structure.

CSSOM contains styling.

Neither alone can create a webpage.

Summary

Part 6: DOM + CSSOM = Render Tree

Now the magic happens.

What is Render Tree?

Render Tree is a combination of:

DOM Tree
     +
CSSOM Tree
     =
Render Tree

Why Render Tree?

Browser needs:

Structure + Styling

before displaying anything.

Example

DOM:

body
 └── h1

CSSOM:

h1
 └── color:red

Render Tree:

body
h1
 └── color:red

Visual Flow

HTML
 ↓
DOM

CSS
 ↓
CSSOM

DOM + CSSOM
 ↓
Render Tree

Hidden Elements

Elements with:

display:none;

are NOT added to Render Tree.

Example:

<h1>Hello</h1>
<p style="display:none">Hidden</p>

Render Tree contains:

h1

Only.

After Render Tree

Browser performs:

Layout

Calculates:

Width
Height
Position
Margin
Padding

Paint

Actually draws:

Text
Colors
Borders
Images

onto the screen.

Complete Rendering Pipeline

HTML
 ↓
Parsing
 ↓
Tokenization
 ↓
DOM Tree

CSS
 ↓
Parsing
 ↓
CSSOM Tree

DOM + CSSOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Screen

Part 7: Selection of Elements

JavaScript interacts with webpages through DOM element selection.

Why Select Elements?

To:

• Change text
• Change styles
• Add events
• Create elements
• Delete elements

1. getElementById()

Selects element using ID.

HTML:

<h1 id="title">Hello</h1>

JS:

const heading =
document.getElementById("title");
console.log(heading);

2. getElementsByClassName()

HTML:

<p class="text">One</p>
<p class="text">Two</p>

JS:

const items =
document.getElementsByClassName("text");

Returns:

HTMLCollection

3. getElementsByTagName()

document.getElementsByTagName("p");

Returns all p elements.

4. querySelector()

Returns first matching element.

document.querySelector(".box");

document.querySelector("#title");

document.querySelector("p");

5. querySelectorAll()

Returns all matching elements.

document.querySelectorAll(".box");

Returns:

NodeList

Difference Between querySelector and querySelectorAll

Most Commonly Used in Modern JavaScript

document.querySelector()
document.querySelectorAll()

These are the most popular methods in React, JavaScript, and modern frontend development.

Final DOM Summary

Browser Rendering Learning Path

HTML
 ↓
Parsing
 ↓
Tokenization
 ↓
DOM Tree

CSS
 ↓
Parsing
 ↓
CSSOM Tree

DOM + CSSOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint
 ↓
Screen

Then

JavaScript
 ↓
DOM Selection
 ↓
DOM Manipulation

This flow is the foundation of the DOM and browser rendering engine