Guided Notes
DOM Manipulation
Selecting elements, changing text, attributes, classes, and styles, and creating and removing elements.
The DOM tree
Slide 1 / 5When a page loads, the browser turns the HTML into the DOM (Document Object Model) — a tree of objects, one per element, with document at the root.
JavaScript reads and changes this tree, and the page updates instantly. Nothing changes in the original HTML file — only the live page.
Open DevTools' Elements panel to watch the DOM change as your script runs.
