← Back to Blog
• 4 min read • Avinash Jha

DOM Construction in Browser

Discover how the DOM is constructed in the browser and how it is used to render the page.

web development dom browser html javascript programming

The DOM (Document Object Model) is a crucial part of how web browsers interpret and interact with HTML documents. It serves as a structured representation of the HTML content, allowing both the browser and JavaScript to manipulate the webpage dynamically. In this article, we will break down the process of DOM Construction step by step in detail.

1. What is the DOM?

  • The DOM is a tree-like structure that represents the HTML document.
  • Each HTML element (e.g., <div>, <p>, <img>) becomes a node in the DOM tree.
  • Nodes can be:
    • Element nodes: Represent HTML tags (e.g., <div>, <h1>).
    • Text nodes: Represent the text content inside an element (e.g., "Hello World" inside a <p> tag).
    • Attribute nodes: Represent attributes of an element (e.g., id, class, src).
    • Comment nodes: Represent comments in the HTML (e.g., <!-- This is a comment -->).

The DOM is essentially an API (Application Programming Interface) that allows developers to programmatically access and manipulate the structure, content, and style of a webpage.

2. How is the DOM Constructed?

The DOM construction process happens when the browser parses the HTML document. Here’s a detailed breakdown:

  1. Fetching the HTML

    • When you request a webpage, the browser sends an HTTP/HTTPS request to the server hosting the page.
    • The server responds with the HTML file, which is sent to the browser for parsing.

  2. Parsing the HTML

    • The browser starts reading the HTML document from top to bottom.
    • As it encounters each HTML tag, it creates corresponding nodes in the DOM tree.

For example, consider this simple HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

The browser will parse this HTML and construct the following DOM tree:

Document
└── html
    ├── head
    │   └── title
    │       └── Text Node ("My Page")
    └── body
        ├── h1
        │   └── Text Node ("Welcome to My Page")
        └── p
            └── Text Node ("This is a paragraph.")

  1. Handling Scripts

    • If the browser encounters a <script> tag during parsing, it pauses the HTML parsing to fetch and execute the script.

      This behavior can block the DOM construction until the script is fully executed unless the <script> tag includes the async or defer attribute:

      • async: The script is downloaded asynchronously and executed as soon as it’s ready, without blocking HTML parsing.
      • defer: The script is downloaded asynchronously but executed only after the entire HTML document has been parsed.

  2. Handling Stylesheets

    • If the browser encounters a <link> tag referencing a CSS file, it fetches and parses the CSS file to build the CSSOM (CSS Object Model).
    • While fetching and parsing CSS does not block HTML parsing, it does block rendering (painting) of the page until the CSSOM is ready.

  3. Building the DOM Tree

    • The browser continues parsing the HTML and creating nodes until it reaches the end of the document.
    • At this point, the DOM tree is fully constructed and represents the entire structure of the HTML document.

3. How Does the Browser Use the DOM?

Once the DOM is constructed, the browser uses it for several purposes:

Rendering the Page

  • The browser combines the DOM with the CSSOM (CSS Object Model) to create the Render Tree, which determines what is visible on the screen and how it should look.
  • The browser performs layout calculations (determining the position and size of elements) and paints the elements on the screen.

JavaScript Interaction

  • JavaScript can access and manipulate the DOM using the DOM API.
  • For example:
    • Adding or removing elements: document.createElement(), element.appendChild().
    • Modifying content: element.textContent = "New Content".
    • Changing styles: element.style.color = "red".
    • Responding to events: element.addEventListener("click", function() { ... }).

Dynamic Updates

  • When JavaScript modifies the DOM (e.g., adding a new <div>), the browser updates the DOM tree and may trigger reflows (recalculating layout) and repaints (redrawing elements) to reflect the changes on the screen.

4. Example of DOM Construction

Let’s walk through a more detailed example:

HTML Code

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <header>
      <h1 id="main-title">Hello World</h1>
    </header>
    <main>
      <p class="description">This is a sample paragraph.</p>
    </main>
    <footer>
      <p>&copy; 2023</p>
    </footer>
  </body>
</html>

DOM Tree Representation

The browser constructs the following DOM tree:

Document
└── html
    ├── head
    │   └── title
    │       └── Text Node ("Example Page")
    └── body
        ├── header
        │   └── h1 (#main-title)
        │       └── Text Node ("Hello World")
        ├── main
        │   └── p (.description)
        │       └── Text Node ("This is a sample paragraph.")
        └── footer
            └── p
                └── Text Node ("© 2023")

Accessing the DOM with JavaScript

You can use JavaScript to interact with the DOM:

// Access the <h1> element by its ID
const title = document.getElementById("main-title");
console.log(title.textContent); // Output: "Hello World"

// Change the text of the <h1> element
title.textContent = "Updated Title";

// Add a new paragraph to the <main> section
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
document.querySelector("main").appendChild(newParagraph);

5. Key Points About DOM Construction

  1. Tree Structure:

    • The DOM is a hierarchical tree where each HTML element is represented as a node.
    • Parent-child relationships are preserved (e.g., <body> is the parent of <header> and <main>).

  2. Incremental Parsing:

    • The browser builds the DOM incrementally as it parses the HTML.
    • This allows parts of the page to be displayed even before the entire HTML document is loaded.

  3. Blocking Behavior:

    • Scripts and stylesheets can block certain stages of the DOM construction process:
      • Scripts block HTML parsing unless marked as async or defer.
      • Stylesheets block rendering until the CSSOM is ready.

  4. Dynamic Nature:

    • The DOM is dynamic and can be modified by JavaScript at runtime.
    • Changes to the DOM trigger updates to the Render Tree, layout, and painting.

6. Conclusion

The DOM is a fundamental concept in web development, acting as the bridge between the HTML structure and the browser's rendering engine. By understanding how the DOM is constructed and used, you can better grasp how webpages are built, rendered, and manipulated dynamically. The DOM’s tree-like structure makes it easy to navigate and modify using JavaScript, enabling rich interactivity and dynamic content on the web.

Comments

← Back to Blog