Guided Notes

DOM Manipulation

Selecting elements, changing text, attributes, classes, and styles, and creating and removing elements.

The DOM tree

Slide 1 / 5

When 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.

← Sets, Maps, Dates & JSON