BitWithBite
Full-Stack · Quick Reference
Lesson 17 — DOM Manipulation & Events Cheat Sheet
In one line: Select elements, change them via classList, and react to clicks/input/submit with addEventListener.
Key Ideas
1querySelector/All. Selects elements by CSS selector.
2classList. add/remove/toggle CSS classes.
3addEventListener. Attaches an event handler.
4e.preventDefault(). Stops a form's page-reload submit.
5e.target. The element that triggered the event.
Example
const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
box.classList.toggle('active');
});
form.addEventListener('submit', (e) => {
e.preventDefault();
console.log(e.target);
});