BitWithBite
Full-Stack Worksheet
📡 DOM Manipulation & Events
SCORE___ / 20
NameClassDate
After this worksheet you can
Select elements with querySelectorToggle classes with classListAttach event listenersPrevent default form submission📚 Quick Recap
🎯 What you'll practice: Selecting, modifying, and listening for events on DOM elements.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1The method to select one matching element is:
2classList.toggle('active') will:
3e.preventDefault() on a submit event stops:
4e.target refers to:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The method that attaches a handler function to an element is .
6querySelectorAll returns a of matching elements.
7Write JS to select an element with id="menu" and add the class "open" to it.
8Write an event listener that logs "clicked" when a button with id="go" is clicked.
9Why would you call e.preventDefault() inside a form's submit handler?
🚀 Section C · Challenge ● CHALLENGE 5
10Explain, in terms of what you'll learn in React, why manually managing DOM state with querySelector and classList becomes hard to scale as an app grows.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = addEventListener 6 = NodeList 7 = document.querySelector('#menu').classList.add('open'); 8 = document.querySelector('#go').addEventListener('click', () => console.log('clicked')); 9 = To stop the browser's default full-page reload/navigation so the form's data can be handled with JavaScript (e.g. sent via fetch) instead | 10 = As an app grows, manually tracking which classes/attributes are set on which elements across many interactions becomes error-prone and hard to reason about; React solves this by letting you describe the UI as a function of state, and it handles all DOM updates for you.