Topic

DOM Construction & Tree Building

How the tree grows as tokens stream in. Includes insertion modes, foster parenting, and custom elements.

domtreemutation

HTML

sample

<div id="app"><p data-node="text">DOM nodes stream in order.</p></div>

CSS

sample

p { color: #22d3ee; }

JavaScript

sample

const p = document.querySelector('p'); p.setAttribute('data-live', 'true');

Visualizer

DOM Construction

Tree building, foster parenting, and mutation observation.

Visualizer

DOM Tree Construction

Insertion modes build the DOM incrementally. Watch nodes attach and mutations stream in.

live

Controls

Live DOM inspectors and mutation observers depend on this structure.

Visualization

<html>

<body>

<main>

Mutation log

Tokenizer enters "in body" mode

Why this matters

Connect the dots between specs (HTML, CSS, WebIDL) and engine behaviors (parser, layout, GPU). Use the sandbox to reproduce each step with your own snippets.