DOM Manipulation & Events — Roadmap Step & Resources
Selecting elements, updating the DOM, event listeners and event bubbling
- Level: beginner
- Estimated time: 2 days
- Roadmap: Next.js Full Stack
Before this step
Mini projects
- Build an interactive to-do list with vanilla JS
Interview questions
- What is event delegation and why use it?
- Event bubbling vs capturing?
Study resources
- Learn The Basics Of The DOM By Building A Simple App (Video) — Web Dev Simplified teaches core DOM manipulation concepts by building a real to-do app.
- Introduction to the DOM (Article) — MDN's official introduction to the Document Object Model and how JavaScript interacts with it.
- Locating DOM elements using selectors (Article) — MDN tutorial on selecting, updating, and modifying DOM elements with querySelector and event listeners.
- JavaScript DOM Crash Course (Video) — Traversy Media's thorough 4-part series on selectors, DOM traversal, element creation, and event delegation.
- Document: querySelector() method (Article) — MDN's documentation on targeting nodes with CSS selectors and mutating live elements.
- EventTarget: addEventListener() method (Article) — MDN documentation on listening to user interactions, bubbling, and event listener lifecycle.
Part of
- JavaScript — section
- Next.js Full Stack roadmap — the full learning path