Deepika Pusala

Posted on Aug 14

Day 6 as a Full Stack Intern: DOM & CSSOM construction , Render tree

DOM, CSSOM & Render Tree

When we write HTML and CSS, the browser cannot directly display the code on the screen.

The browser first reads, understands, and processes our HTML and CSS.

During this process, three important things are created:

DOM → represents the HTML structure
CSSOM → represents the CSS rules
Render Tree → combines the required information from DOM + CSSOM to determine what should actually appear on the screen

Let's understand each one step by step.

1. What is DOM?

DOM stands for:

Document Object Model

The DOM is a tree-like representation of the HTML document created by the browser.

In simple words:

DOM is the browser's structured representation of your HTML.

Suppose we have this HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>

<body>
    <h1>Hello World</h1>
    <p>Welcome to my website.</p>
</body>
</html>

The browser reads this HTML and creates a DOM tree.

It looks conceptually like this:

Document
│
└── html
    │
    ├── head
    │   └── title
    │
    └── body
        │
        ├── h1
        │
        └── p

The important thing to understand is:

The browser does not keep thinking about the HTML file as plain text.

It converts the HTML into a structure of objects/nodes that it can work with.

2. Why is DOM called a Tree?

DOM is called a tree because HTML elements have a parent-child relationship.

For example:

<body>
    <div>
        <h1>Hello</h1>
        <p>Welcome</p>
    </div>
</body>

Here:

body
└── div
    ├── h1
    └── p

So:

body is the parent of div
div is the parent of h1
div is the parent of p
h1 and p are siblings

This parent-child structure forms a tree.

3. What are DOM Nodes?

Everything in the DOM is represented as a node.

For example:

<h1>Hello World</h1>

The browser can represent this using nodes such as:

Element Node
    ↓
   <h1>
    ↓
Text Node
"Hello World"

Some common types of nodes are:

Document node
Element node
Text node
Comment node
Attribute information

For example:

<p>Hello</p>

Conceptually:

<p>
└── "Hello"

<p> is an element node and "Hello" is a text node.

4. How is the DOM Created?

The browser receives the HTML from the server.

For example:

<h1>Hello</h1>
<p>Welcome</p>

The browser roughly performs this process:

HTML file
   ↓
HTML parsing
   ↓
HTML elements are identified
   ↓
DOM nodes are created
   ↓
DOM Tree

So:

HTML → Parsing → DOM Tree

The browser's HTML parser reads the HTML from top to bottom and creates the corresponding DOM structure.

5. Example: HTML → DOM

Consider:

<body>
    <h1>My Website</h1>

    <p>Hello everyone!</p>

    <button>Click Me</button>
</body>

The browser creates something conceptually like:

Document
└── html
    └── body
        ├── h1
        │   └── "My Website"
        │
        ├── p
        │   └── "Hello everyone!"
        │
        └── button
            └── "Click Me"

This is the DOM tree.

6. What is CSSOM?

Now we understand the DOM.

But the DOM only tells the browser about the HTML structure.

It doesn't tell the browser how those elements should look.

That's where CSSOM comes in.

CSSOM stands for:

CSS Object Model

In simple words:

CSSOM is the browser's structured representation of CSS rules.

For example:

h1 {
    color: blue;
    font-size: 40px;
}

p {
    color: gray;
}

The browser reads these CSS rules and creates a structure representing them.

Conceptually:

CSSOM
│
├── h1
│   ├── color → blue
│   └── font-size → 40px
│
└── p
    └── color → gray

So:

CSS
 ↓
CSS Parsing
 ↓
CSSOM

7. Why do we need CSSOM?

Imagine the browser only had the DOM.

It would know:

There is an h1.
There is a paragraph.
There is a button.

But it wouldn't know:

What color should the h1 be?
How large should it be?
Should the paragraph be visible?
What font should be used?
Should the button have a border?

CSS provides this visual information.

Therefore:

DOM  → What elements exist?
CSSOM → How should those elements be styled?

8. Example: DOM + CSSOM

Suppose we have:

HTML

<h1>Hello World</h1>
<p>Welcome to my website.</p>

CSS

h1 {
    color: blue;
    font-size: 40px;
}

p {
    color: gray;
}

The browser creates:

DOM

Document
└── html
    └── body
        ├── h1
        │   └── "Hello World"
        │
        └── p
            └── "Welcome to my website."

CSSOM

h1
├── color → blue
└── font-size → 40px

p
└── color → gray

Now the browser has:

DOM  → Structure
CSSOM → Styling

But it still needs to figure out:

Which elements actually need to be displayed?

That's where the Render Tree comes in.

9. What is Render Tree?

The Render Tree is a tree created by the browser using information from the DOM and CSSOM.

In simple words:

Render Tree contains the elements that need to be rendered on the screen, along with their applicable styles.

Think of it like this:

DOM
+
CSSOM
 ↓
Render Tree

The render tree answers:

"What should actually be displayed?"

10. DOM vs CSSOM vs Render Tree

The easiest way to remember them is:

Concept	Main Purpose
DOM	Represents HTML structure
CSSOM	Represents CSS rules
Render Tree	Represents what needs to be rendered

Or even simpler:

DOM    → WHAT exists?
CSSOM  → HOW it should look?
Render Tree → WHAT should actually appear?

11. How is the Render Tree Created?

Suppose we have:

<body>
    <h1>Hello</h1>
    <p>Welcome</p>
</body>

And:

h1 {
    color: blue;
}

p {
    color: gray;
}

The browser has:

HTML
 ↓
DOM

and:

CSS
 ↓
CSSOM

Then:

DOM + CSSOM
     ↓
Render Tree

Conceptually:

Render Tree
│
├── h1
│   ├── text → Hello
│   └── color → blue
│
└── p
    ├── text → Welcome
    └── color → gray

The render tree contains the information needed for the browser to render the page.

12. Very Important: Not Everything in DOM Goes Into Render Tree

This is one of the most important concepts.

The DOM may contain elements that should not be displayed.

For example:

<body>

    <h1>Hello</h1>

    <div style="display: none;">
        You cannot see me!
    </div>

</body>

The DOM contains:

body
├── h1
└── div

But:

display: none;

means that the div should not be displayed.

Therefore, it does not appear in the render tree.

Conceptually:

DOM
│
├── h1       → visible
│
└── div      → display:none
              ↓
           NOT in Render Tree

So:

DOM and Render Tree are NOT the same thing.

13. `display: none` and Render Tree

Consider:

<p>Hello</p>

<p style="display: none;">
    Hidden text
</p>

The DOM contains both paragraphs:

DOM
├── p → Hello
└── p → Hidden text

But the render tree contains only:

Render Tree
└── p → Hello

Why?

Because:

display: none;

removes the element from the rendering process.

It doesn't get a visual representation on the page.

14. What About `visibility: hidden`?

Now consider:

p {
    visibility: hidden;
}

This is different from:

display: none;

With:

display: none;

the element is not included in the render tree.

With:

visibility: hidden;

the element still takes up space in the layout, even though you cannot see it.

Conceptually:

display: none
→ element does not participate in layout

visibility: hidden
→ element occupies space but is invisible

This distinction becomes very important when we later learn about layout/reflow and painting.

15. Does CSSOM Contain HTML Elements?

No.

This is a common beginner confusion.

The DOM represents:

HTML

The CSSOM represents:

CSS

For example:

<h1>Hello</h1>

belongs to the DOM.

While:

h1 {
    color: red;
}

belongs to the CSSOM.

Then the browser combines the information while creating the render tree.

16. Complete Flow

The overall process can be understood like this:

                 HTML
                  │
                  ▼
            HTML Parsing
                  │
                  ▼
                 DOM
                  │
                  │
                  ├─────────────┐
                  │             │
                  │             │
                  ▼             ▼
                 CSS           CSS Parsing
                                │
                                ▼
                               CSSOM
                                │
                                │
                 DOM + CSSOM ───┘
                       │
                       ▼
                  Render Tree

After this, the browser continues with:

Render Tree
     ↓
Layout
     ↓
Paint
     ↓
Compositing
     ↓
Pixels on Screen

So the simplified browser rendering pipeline is:

HTML
 ↓
DOM

CSS
 ↓
CSSOM

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

17. A Real-Life Analogy

Imagine you're building a house.

DOM = Building structure

It tells you:

There is a bedroom.
There is a kitchen.
There is a bathroom.
There is a living room.

CSSOM = Design instructions

It tells you:

Bedroom → blue walls
Kitchen → white walls
Living room → large windows
Bathroom → gray tiles

Render Tree = What will actually be built/displayed

If one room is marked:

DO NOT BUILD

then that room doesn't become part of the actual construction.

Similarly, an element with:

display: none;

doesn't become part of the render tree.

18. DOM, CSSOM and Render Tree Example

Let's take a complete example.

HTML

<!DOCTYPE html>

<html>

<head>
    <title>My Website</title>
</head>

<body>

    <h1>Welcome</h1>

    <p>This is my website.</p>

    <div style="display: none;">
        Hidden content
    </div>

    <button>Click Me</button>

</body>

</html>

CSS

h1 {
    color: blue;
    font-size: 40px;
}

p {
    color: gray;
}

button {
    background: black;
    color: white;
}

Step 1: Browser reads HTML

The browser parses the HTML.

It creates the DOM:

Document
└── html
    ├── head
    │   └── title
    │
    └── body
        ├── h1
        ├── p
        ├── div
        └── button

Step 2: Browser reads CSS

The browser parses:

h1 {
    color: blue;
    font-size: 40px;
}

p {
    color: gray;
}

button {
    background: black;
    color: white;
}

It creates the CSSOM.

Conceptually:

CSSOM
│
├── h1
│   ├── color → blue
│   └── font-size → 40px
│
├── p
│   └── color → gray
│
└── button
    ├── background → black
    └── color → white

Step 3: Browser creates Render Tree

Now the browser combines the relevant information.

The hidden div has:

display: none;

So it doesn't appear in the render tree.

Conceptually:

Render Tree
│
├── h1
│
├── p
│
└── button

The hidden div is excluded.

19. Why Does the Browser Need the Render Tree?

Because the browser needs to know exactly what visual content it needs to work with before calculating its position and appearance.

For example, the browser needs to determine:

Which elements are visible?
What styles apply to them?
What should be rendered?

The render tree provides this information.

Then the browser can continue with:

Render Tree
     ↓
Layout

During layout, the browser calculates things such as:

Where should this element be?
How wide is it?
How tall is it?
Where should its children go?

We'll cover this in detail when learning Layout/Reflow.

20. Important Difference Between DOM and Render Tree

Remember this example:

<div style="display: none;">
    Hello
</div>

DOM:

div
└── "Hello"

The element exists in the DOM.

But because:

display: none;

it doesn't participate in rendering.

Therefore:

DOM       → contains it
Render Tree → does not contain it

This is why we should never think:

"DOM = everything that appears on the screen."

That's not correct.

A better statement is:

DOM represents the document structure, while the Render Tree represents the visual structure that the browser needs to render.

21. What Happens When JavaScript Changes the DOM?

Even though JavaScript isn't required to understand DOM and CSSOM, it's useful to know this basic idea.

Suppose the page initially has:

<h1>Hello</h1>

JavaScript can change it:

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

The DOM changes.

The browser may then need to update:

DOM
 ↓
Render Tree
 ↓
Layout
 ↓
Paint

Depending on what changed, the browser may need to perform some or all of these steps again.

We'll learn exactly when this happens in the Reflow, Paint and Compositing topic.

22. DOM vs CSSOM vs Render Tree — Quick Comparison

DOM	CSSOM	Render Tree
Represents HTML	Represents CSS	Represents visual content
Created from HTML	Created from CSS	Created using DOM + CSSOM
Contains document structure	Contains styling rules	Contains renderable information
Uses nodes	Uses CSS rules/objects	Used for rendering
Doesn't directly determine final visual layout	Doesn't directly represent HTML structure	Used before layout

23. Easy Way to Remember

Think of a webpage as a person getting dressed.

DOM

Person's body structure

It tells us what exists.

CSSOM

Clothing instructions

It tells us how things should look.

Render Tree

Final visible outfit

It tells the browser what actually needs to be displayed.

Then:

Layout

figures out where everything goes.

Paint

draws everything.

Compositing

puts the different visual layers together.

24. The Big Picture

The entire browser rendering process can be simplified as:

                HTML
                 │
                 ▼
          ┌─────────────┐
          │ HTML Parser │
          └──────┬──────┘
                 │
                 ▼
                DOM
                 │
                 │
                 │       CSS
                 │        │
                 │        ▼
                 │  ┌─────────────┐
                 │  │ CSS Parser  │
                 │  └──────┬──────┘
                 │         │
                 │         ▼
                 │        CSSOM
                 │         │
                 └────┬────┘
                      │
                      ▼
                 Render Tree
                      │
                      ▼
                    Layout
                      │
                      ▼
                    Paint
                      │
                      ▼
                 Compositing
                      │
                      ▼
                 Screen 🖥️

25. Key Points to Remember

DOM

DOM = structured representation of HTML.

It tells the browser:

What elements exist?
How are they related?

CSSOM

CSSOM = structured representation of CSS.

It tells the browser:

What CSS rules exist?
How should elements be styled?

Render Tree

Render Tree = representation of the content that needs to be rendered, using DOM + CSS information.

It tells the browser:

What should actually participate in rendering?

26. One-Line Summary

The easiest way to remember the whole concept is:

HTML → DOM
CSS  → CSSOM

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

Or simply:

DOM = Structure
CSSOM = Styling rules
Render Tree = What gets rendered
Layout = Where it goes
Paint = How it is drawn
Compositing = How layers are combined

DOM, CSSOM & Render Tree

1. What is DOM?

2. Why is DOM called a Tree?

3. What are DOM Nodes?

4. How is the DOM Created?

5. Example: HTML → DOM

6. What is CSSOM?

7. Why do we need CSSOM?

8. Example: DOM + CSSOM

HTML

CSS

DOM

CSSOM

9. What is Render Tree?

10. DOM vs CSSOM vs Render Tree

11. How is the Render Tree Created?

12. Very Important: Not Everything in DOM Goes Into Render Tree

13. display: none and Render Tree

14. What About visibility: hidden?

15. Does CSSOM Contain HTML Elements?

16. Complete Flow

17. A Real-Life Analogy

DOM = Building structure

CSSOM = Design instructions

Render Tree = What will actually be built/displayed

18. DOM, CSSOM and Render Tree Example

HTML

CSS

Step 1: Browser reads HTML

Step 2: Browser reads CSS

Step 3: Browser creates Render Tree

19. Why Does the Browser Need the Render Tree?

20. Important Difference Between DOM and Render Tree

21. What Happens When JavaScript Changes the DOM?

22. DOM vs CSSOM vs Render Tree — Quick Comparison

23. Easy Way to Remember

DOM

CSSOM

Render Tree

24. The Big Picture

25. Key Points to Remember

DOM

CSSOM

Render Tree

26. One-Line Summary

13. `display: none` and Render Tree

14. What About `visibility: hidden`?