Async & Browser JS / DOM
The DOM
The browser's live, tree-shaped model of the page — the thing JavaScript actually manipulates.
The Document Object Model represents the page as a tree of nodes, starting from `document` down through elements and text. JavaScript doesn't edit HTML text directly — it queries and mutates this tree, and the browser re-renders whatever changed. `querySelector` walks the tree looking for the first match to a CSS selector.
Codeeditable — Run executes your edits
Loading...
Console
Output will appear here
Visualization
State
Step through — the console panel shows what's happening
Why?
querySelector performs a depth-first search of the DOM tree for the first element matching the selector, then hands back a live reference to that exact node.