Back to JavaScript cheat sheet

JavaScript DOM Manipulation Practice

Chapter 09 practice page for DOM selection, traversal, modification, forms, drag-and-drop, and modal behavior. Each section is interactive so students can see the DOM respond immediately.

DOM selection Form validation Drag and drop Modal component
Open JavaScript cheat sheet Open Playwright cheat sheet

What students should practice here

The focus is not memorizing APIs in isolation. Students should connect each DOM method to visible behavior: find an element, update it safely, validate input, move nodes around, and build reusable UI pieces.

  • Use querySelector and querySelectorAll consistently.
  • Prefer textContent when updating user-facing text.
  • Manipulate classes through classList, not string concatenation.
  • Batch related DOM updates and reset state cleanly.
  • Treat forms and modal flows as real product features, not toy examples.

Exercise 1: Select and Modify Elements

Practice DOM selection, traversal, text updates, and class toggling.

Selection + Modification

Live lab

Click the actions below to target the highlighted card and inspect parent, child, and sibling behavior.

DOM Selection
querySelector closest()
DOM Traversal
parentElement nextElementSibling
DOM Modification
textContent classList

Starter snippet

const target = document.querySelector('#dom-target'); const parent = target.parentElement; const previous = target.previousElementSibling; const next = target.nextElementSibling; target.classList.toggle('active'); target.querySelector('.topic-title').textContent = 'Updated title';
No action yet.

Exercise 2: Create a Dynamic List

Build list items with safe text insertion and clear append/prepend behavior.

Create + Append

Live lab

Add topics the way students would during a class recap. This uses DOM creation, fragments, and clean removal.

  1. querySelector and querySelectorAll
  2. classList.add and classList.toggle

Starter snippet

const fragment = document.createDocumentFragment(); items.forEach((item) => { const li = document.createElement('li'); li.textContent = item; fragment.appendChild(li); }); list.appendChild(fragment);
2 items loaded.

Exercise 3: Build a Form Validator

Use DOM APIs to validate fields, render errors, and provide a clean success state.

Forms + Validation

Live lab

Try invalid values first, then correct them. The validator updates the DOM instead of relying only on alerts.

Starter snippet

const formData = new FormData(form); const values = Object.fromEntries(formData); if (!values.name.trim()) { nameError.textContent = 'Name is required'; } if (!form.checkValidity()) { form.reportValidity(); }
Waiting for submission.

Exercise 4: Drag and Drop Priority Board

Move tasks between columns and see how DOM nodes are re-parented during drag events.

Drag + Drop

Live lab

Drag topics from backlog to focus. This is the same DOM mental model students need for dynamic UI behavior.

Backlog

Build selectors practice
Refactor form errors
Create modal close flow

Focus now

Starter snippet

item.addEventListener('dragstart', () => { dragged = item; }); zone.addEventListener('drop', (event) => { event.preventDefault(); zone.appendChild(dragged); });
Drag an item into the focus column.

Exercise 5: Create a Modal Component

Control visibility, focus, and dismissal behavior using classes, attributes, and event handlers.

Modal + Accessibility

Live lab

Open the modal, then close it with the button, overlay, or Escape.

classList.toggle aria-hidden keydown

Starter snippet

const modal = document.querySelector('#practice-modal'); function openModal() { modal.classList.add('open'); modal.setAttribute('aria-hidden', 'false'); } function closeModal() { modal.classList.remove('open'); modal.setAttribute('aria-hidden', 'true'); }

Best Practices for This Chapter

Common mistakes

  • Using innerHTML where textContent is safer.
  • Querying the same selector repeatedly instead of caching it.
  • Forgetting to reset errors and old success state in forms.
  • Mixing DOM updates and event logic into one large function.

Interview topics

  • querySelector vs getElementById
  • textContent vs innerText vs innerHTML
  • Event bubbling and event delegation
  • How drag-and-drop updates the DOM tree

Use this with

  • JavaScript cheat sheet
  • Playwright fundamentals
  • Live coding practice
  • Programs tab examples