Stage 2 · Lesson 6 of 10
The DOM and events
is the browser's live tree of objects, built from your . changes the page by changing this tree. Select elements with querySelector, create new ones with createElement, set their text with textContent and add them to the page with append.
Respond to users with addEventListener("click", handler). The handler receives an object, which tells you, among other things, which element was the target. preventDefault() stops the browser's default behaviour, such as a form reloading the page.
Events bubble: they travel up from the clicked element through its parents. So event delegation lets one listener on a list handle clicks on every item, including items added later.
Common trapsetting innerHTML with text a user typed, which lets them inject scripts into your page; use textContent.
A question to check yourself, an AI practice session and 2 cheat sheet entries come with the full roadmap. Unlock
Resources for this stage
Start with· follow one of these
- CoursePaidGrokking JavaScript Fundamentals
Design Gurus · Beginner · $50
Guided beginner course on the language core, with quizzes after every chapter
- GuideFreeJavaScript.info
Ilya Kantor
Free and thorough: Part 1 for the language, Part 2 for the DOM and events, Part 3 for fetch
Practise
Keep handy
Also worth your time
- You Don't Know JS YetGo deeper
For when scope, this, coercion or async behaviour still feel like magic