The DOM Explained

Open any page, right-click, choose "Inspect," and you're looking at the DOM - not the HTML file the server sent, but a live tree of objects the browser built from it. JavaScript doesn't touch your HTML source. It touches this tree. Change the tree, and the page changes, instantly, with no re-download and no server involved.

This guide assumes you know basic JavaScript syntax - variables, functions, conditionals. If that's still new, start with JavaScript From Zero and come back. Here, the focus is narrower: what the DOM is, how to select and modify elements in it, and how events travel through it.

The phases

1. The DOM Is Not the HTML - the browser parses HTML into a tree of objects; that tree, not the original text, is what JavaScript sees. View Source vs. the Elements panel, and what happens when JavaScript changes the tree.
2. Selecting and Modifying Elements - querySelector and querySelectorAll, classList, textContent vs. innerHTML (and the XSS risk of the latter), reading and writing inline styles.
3. Events: Listening, Bubbling, and Delegation - addEventListener, the event object, bubbling, and event delegation - one listener handling clicks for an entire list instead of one per item.

By the end, you'll read a page's real structure in devtools instead of guessing from the source, and you'll know why professional codebases attach far fewer event listeners than you'd expect.