ReviseAlgo Logo

DOM Manipulation

What is the DOM?

Master Document Object Model basics. Learn how browsers parse HTML into a tree structure, look up nodes, and handle repaint cycles.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

The DOM (Document Object Model) is a programming interface for web documents. It represents the structure of an HTML page as a hierarchical tree of objects, allowing programming languages (like JavaScript) to access, modify, and style the document dynamically.

2. Why It Matters

The DOM is the bridge between your HTML markup and JavaScript logic. Understanding the DOM is essential for updating page content dynamically, handling user events, and building interactive web applications.

3. Real-World Analogy

Think of a Smart Green Building Control System:

  • HTML Code (Building Blueprint): The physical blueprint of the building, showing where rooms, walls, and light switches are located. Once printed, it cannot change.
  • The DOM (Active Control Panel): An interactive digital replica of the building running on a computer screen. Clicking a button on the panel (running a JavaScript method) turns off a light in a room (updates the physical webpage). The panel dynamically reflects changes made to the building.

4. HTML Parsing & the DOM Tree

When a browser loads an HTML document, it parses the markup code sequentially and constructs a tree structure in memory:
• Document: The root node representing the entire webpage.
• Element: HTML tags (like <body>, <div>) represented as objects.
• Text: The text content inside HTML tags.
• Attribute: Properties of HTML elements (like class or id).

5. Browser Rendering & Repaint Cycles

Modifying DOM elements triggers browser recalculations:
1. DOM Tree Construction: Parsing HTML into node objects.
2. CSSOM Tree Construction: Parsing CSS styles into style rule objects.
3. Render Tree: Combining DOM and CSSOM to determine which visible elements exist and their styles.
4. Layout (Reflow): Computing the exact geometry (size and position) of each element on the screen.
5. Paint (Repaint): Rasterizing pixels onto the screen.
Modifying properties like width or height triggers a costly Reflow and Repaint. Modifying properties like color triggers only a Repaint.

6. Practical Example

This script demonstrates querying basic page properties and updating the title dynamically:

7. Common Mistakes

  • Running DOM scripts before the DOM is loaded: If a script is placed in the HTML header without deferred attributes, it runs before the browser has finished parsing the body, causing DOM lookups to return null. Use the defer attribute on your script tags or listen for the DOMContentLoaded event.

8. Quick Quiz

Q1: Which browser rendering step is triggered when you change an element's width or height?

A) Repaint only

B) Reflow (Layout) and Repaint

Answer: B — Changing geometric properties (like size or position) triggers a Reflow to recalculate layouts, followed by a Repaint.

9. Scenario-Based Challenge

The Critical Rendering Optimization:

An application modifies element styles 50 times in a loop, causing page lag. Explain how browser reflows are triggered during this loop, and how to batch styling updates to minimize performance overhead.

10. Debugging Exercise

Explain why this script crashes, and how to fix it:

<!DOCTYPE html>
<html>
<head>
  <script>
    // Objective: change paragraph text
    const p = document.getElementById('text');
    p.textContent = 'Updated!'; // Throws TypeError: Cannot set properties of null!
  </script>
</head>
<body>
  <p id="text">Original text</p>
</body>
</html>
View Solution

Diagnosis: The script executes inside the document head before the browser has parsed the <body> section. Because the paragraph element does not exist in the DOM tree yet, getElementById returns null.

Fix: Add the defer keyword to the script tag, or listen for the DOMContentLoaded event before modifying the element:

document.addEventListener('DOMContentLoaded', () => {
  const p = document.getElementById('text');
  p.textContent = 'Updated!';
});

11. Interview Questions

🟢 Q1: What is the DOM, and how is it constructed by the browser?

Answer: The DOM is a programming interface that represents HTML document structures as a tree of objects. The browser constructs the DOM by parsing the HTML markup sequentially:
1. Converts HTML bytes to characters.
2. Identifies HTML tags as tokens.
3. Converts tokens into element node objects.
4. Links the node objects in a tree structure based on their nested hierarchy.

12. Production Considerations

  • • Minimize Reflows: Avoid reading geometric layout properties (like offsetHeight or clientWidth) immediately after writing style changes. Doing this forces synchronous layouts, which causes layout thrashing and slows down page performance.