DOM Construction

The browser parses HTML into a DOM tree that represents the document structure used by scripting and rendering. DOM construction is one stage of the browser's broader rendering pipeline.

When the browser receives HTML, it tokenizes the markup and processes those tokens according to the HTML parsing rules. As elements, attributes, text, and other constructs are recognized, the parser creates corresponding DOM nodes and connects them into a tree.

The resulting DOM represents the document's logical structure: elements become element nodes, text becomes text nodes, and attributes become part of element state. The DOM is a programming interface, so JavaScript can query, modify, add, or remove nodes through APIs such as `querySelector()` and `appendChild()`.

DOM construction is related to, but distinct from, CSS processing and layout. The DOM describes what the document contains and how nodes are nested; CSS produces style information, and later rendering stages use the relevant document and style information to determine what should be painted.

HTML parsing can encounter constructs that affect how parsing proceeds. For example, a normal parser-blocking `script` can pause further HTML parsing while the script executes, whereas `defer` and `async` change when external scripts execute. This is why script placement and loading attributes can affect when the DOM becomes available to application code.

Key points

• HTML parsing turns markup into a structured DOM tree.
• The DOM contains nodes such as elements and text and exposes them through scripting APIs.
• DOM construction is separate from CSS calculation, layout, and painting.
• Parser-blocking scripts can interrupt continued HTML parsing.
• `defer` and `async` change external script loading and execution behavior.

Interview questions

Does the DOM directly determine what gets painted on screen?

No. The DOM describes the document structure, but visual rendering also depends on CSS and other rendering information. Style calculation determines applicable styles, and layout determines geometry before painting produces pixels. Some DOM nodes may not produce visible content at all, such as certain metadata elements.

What happens when a browser receives an HTML document?

The browser parses the HTML into tokens and uses the HTML parsing algorithm to construct a DOM tree. Elements and text become nodes connected according to the document structure. The resulting DOM can then be queried and manipulated by JavaScript. Other rendering stages use the document together with style information to produce the visual result.

What is the DOM, and why is it useful to frontend developers?

The DOM is an in-memory object representation of a document. It exposes nodes and APIs that JavaScript can use to inspect and modify the document. For example, `querySelector()` can locate an element and methods such as `appendChild()` can change the tree. Browser rendering can then reflect relevant DOM changes.

Why can an ordinary script tag affect HTML parsing?

A classic external script encountered during parsing can cause the parser to pause while the script is fetched and executed, subject to the script's loading conditions. This matters because later HTML has not necessarily been parsed when the script runs. A script can therefore observe a partially constructed document. `defer` is commonly used when an external script should wait until HTML parsing has completed.

How would you explain the relationship between HTML parsing, DOM construction, and JavaScript execution?

HTML parsing consumes the document according to the HTML parsing algorithm and progressively constructs the DOM. Script execution can interact with that process, particularly when parser-blocking scripts are encountered. External script attributes such as `async` and `defer` alter fetching and execution timing. Understanding these interactions is important when reasoning about initialization order, DOM availability, and page performance.