📖 Notes
LESSON 17 OF 32
DOM Manipulation & Events
Making Pages Respond
The DOM (Document Object Model) is JavaScript's live representation of your HTML — select elements, change them, and react to clicks, input, and submissions.
Core APIs
Selecting, Changing, Listening
🎯
querySelector / All
Selects the first (or all) elements matching a CSS selector.
🎨
classList
.add(), .remove(), .toggle() — change styling via CSS classes, not inline styles.👂
addEventListener
Attaches a handler function for events like click, submit, input.
🛑
e.preventDefault()
Stops a form's default full-page-reload submission.
Select, Toggle, Listen
JSconst btn = document.querySelector('#submit-btn');
const box = document.querySelector('.box');
btn.addEventListener('click', () => {
box.classList.toggle('active');
});
form.addEventListener('submit', (e) => {
e.preventDefault(); // stop the page reload
console.log(e.target); // the form element that fired the event
});
⚠️
Direct DOM manipulation vs React
Everything in this lesson — querySelector, classList, manual event listeners — is exactly what React eliminates. Once you reach Section 4, you'll describe *what* the UI should look like and React handles the DOM updates for you.