Module 14 · The DOM and Events: JavaScript Touches the Page
Every DOM Tool, One by One, With What It Returns
Free with an accountReading
Kenji builds a small page for his uncle's tea stall. It lists the teas with their prices, has a search box, a basket counter, and a button to mark a tea as sold out. Each part needs a different tool. One finds many elements at once, one makes new ones, one listens for typing, one keeps a click from reaching the parent.
Checking what this lesson needs for you…
What is inside Every DOM Tool, One by One, With What It Returns
- querySelector and querySelectorAll
- getElementById and getElementsByClassName
- textContent
- innerHTML, and the injection risk
- createElement, append and remove
- classList
- style, and why a class is better
- Attributes and data attributes
- The event object
- Bubbling, capturing and stopPropagation
- Event delegation
- preventDefault
- The common events
- Removing a listener