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 and Step both follow your edits
Loading...
Console
Output will appear here
Visualization
Result
Press Step to watch each line's result appear here
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.