dom-tree

The browser receives HTML as a text string. To render the page and allow JavaScript to manipulate it, the browser needs a structured representation of the document. Raw HTML text isn’t programmable.

The DOM (Document Object Model) tree is a tree structure built by parsing HTML, where each HTML element becomes a node. It’s the programmatic interface that JavaScript uses to read and modify the page.

1. HTML Received: Browser starts receiving HTML from server
2. Tokenization: HTML is broken into tokens (<div>, class=, etc.)
3. Tree Construction: Tokens are assembled into a tree

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

4. Scripts may modify: JavaScript can add/remove nodes

The DOM is live—changes via JavaScript immediately affect the structure.

• Tree structure mirrors HTML nesting
• JavaScript can traverse and modify the DOM
• document.getElementById() etc. query the DOM
• DOM changes trigger re-rendering (reflow/repaint)

• Built from: Browser Rendering — DOM is step 1
• Builds into: Render Tree — DOM + CSSOM combine
• Related: HTML Parsing — the process that builds the DOM
• Related: CSSOM — CSS counterpart to DOM
• Related: JavaScript — manipulates the DOM

• Malformed HTML gets corrected by parser (auto-close tags)
• document.write() during parsing can break things
• Large DOM = slow rendering and JS operations
• DOM is not the same as HTML source (parser fixes errors)