BitWithBite
JavaScript Worksheet
⚡ DOM Manipulation
SCORE___ / 20
NameClassDate
After this worksheet you can
Select elementsChange text and stylesCreate/append elementsUnderstand the DOM tree📚 Quick Recap
🎯 What you'll learn: The Document Object Model (DOM) is the bridge between JavaScript and HTML. You'll learn to select elements, change content and styles, create and remove elements, traverse the DOM tree, and build interactive pages.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Select by id with:
2querySelector('.btn') selects by:
3Change text with:
4The DOM is:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5document.('#title') selects the id title.
6el.style. = 'red' colours text.
7Change #msg text to 'Saved!'.
8Hide an element with style.
9Create a li with text 'One' and append to #list.
🚀 Section C · Challenge ● CHALLENGE 5
10Why is it called a 'tree'?
💭 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-A 2-B 3-A 4-B | 5 querySelector 6 color 7 = document.querySelector('#msg').textContent='Saved!' 8 = el.style.display='none' 9 = const li=document.createElement('li'); li.textContent='One'; list.append(li) | 10 = Elements nest as parents/children from a single root