Practice & Assessment
Test your understanding of Understanding the DOM
Multiple Choice Questions
5Which method returns null when no element matches the given CSS selector?
What does document.querySelectorAll('li') return?
You want to safely insert user-supplied text into an element without risking XSS. Which property should you use?
Which traversal method walks up the DOM tree and returns the nearest ancestor matching a CSS selector?
Why should you use a DocumentFragment when inserting many elements at once?
Coding Challenges
1Dynamic Task List Builder
Given an HTML page with an input field (#task-input), an Add button (#add-btn), and an empty unordered list (#task-list): write JavaScript so that clicking Add creates a new <li> with the input's text and a Remove button. Clicking Remove deletes only that <li>. Input: any text string from the field. Output: the li appears in the list; clicking its remove button deletes it. Constraint: use createElement and textContent only — no innerHTML. Estimated time: 20-25 minutes.
Mini Project
Live Character-Count Bio Editor
Build a bio editor using only vanilla DOM APIs. Requirements: a textarea (#bio), a live character counter (#char-count) that updates on every keystroke showing remaining characters out of a 200-character limit, a preview div (#preview) that mirrors the textarea content as plain text in real time, a Save button (#save-btn) that appends the current bio as a new card element to a #history list with a timestamp, and a Clear button (#clear-btn) that removes all history cards. Use createElement, textContent, dataset, and DOM traversal — no innerHTML, no libraries.