The DOM Explained

The DOM is the live, in-memory tree the browser builds from your HTML - and the thing JavaScript actually touches. Learn how it differs from the HTML source, how to select and change elements, and how events bubble.

1. The DOM Is Not the HTML The browser parses HTML into a live tree of objects called the DOM. JavaScript reads and changes that tree, not the original HTML text - which is why View Source and devtools can show two different pages.
2. Selecting and Modifying Elements How to find elements with querySelector and querySelectorAll, change classes with classList, set text safely with textContent instead of innerHTML, and read or write inline styles.
3. Events: Listening, Bubbling, and Delegation How addEventListener and the event object work, why events bubble from child to parent, and how to use that to handle a whole list of items with a single delegated listener.