The DOM — Tree, Selectors & Traversal

8. Practice Problems

1. Write a CSS selector to grab all links inside a nav with class "main".
   ✨ Show Answer

   document.querySelectorAll("nav.main a")

2. Set a heading's text to "হ্যালো!".
   ✨ Show Answer

   document.querySelector("h1").textContent = "হ্যালো!";

3. Toggle a "dark" class on the body when a button is clicked.
   ✨ Show Answer

   btn.addEventListener("click",
       () => document.body.classList.toggle("dark"));

4. Build a runnable mock that lists 3 todo items as objects.
   ✨ Show Answer

   a4.js

   const todos = [
       { text: "কেনাকাটা", done: false },
       { text: "পড়াশোনা", done: true },
       { text: "ব্যায়াম",    done: false },
   ];
   todos.forEach(t =>
       console.log(`[${t.done ? "x" : " "}] ${t.text}`));

   Run Copy

5. What's the difference between querySelectorAll (static) and getElementsByClassName (live)?
   ✨ Show Answer

   Answer: querySelectorAll takes a snapshot — adding/removing elements after the call doesn't change the NodeList. getElementsByClassName returns a live HTMLCollection that automatically reflects DOM changes. Live collections are surprising in loops where you mutate the DOM.

6. Use closest to find the nearest .card ancestor.
   ✨ Show Answer

   e.target.closest(".card").remove();

7. Show why innerHTML = userInput is a security risk.
   ✨ Show Answer

   If userInput is <img src=x onerror="steal()">, the browser will parse and execute it. Always use textContent or DOM-built nodes for user data.

8. Build an HTML table from a JS array (sketch).
   ✨ Show Answer

   const tbody = document.querySelector("tbody");
   data.forEach(row => {
       const tr = document.createElement("tr");
       Object.values(row).forEach(v => {
           const td = document.createElement("td");
           td.textContent = v;
           tr.appendChild(td);
       });
       tbody.appendChild(tr);
   });

9. Use dataset to read a custom data-id attribute.
   ✨ Show Answer

   // <li data-id="42"> → li.dataset.id === "42"
   const id = el.dataset.id;

10. Demonstrate that adding to a live HTMLCollection inside a for loop misbehaves.
    ✨ Show Answer

    If list = document.getElementsByClassName("x") and you add a new element with class "x" inside a loop, list.length grows during iteration — the loop never ends. Snapshot first: [...list].forEach(...).

11. Sketch a function that toggles dark mode based on system preference.
    ✨ Show Answer

    const m = matchMedia("(prefers-color-scheme: dark)");
    const sync = () => document.body.classList.toggle("dark", m.matches);
    sync();
    m.addEventListener("change", sync);

12. Replace an element entirely with a new one (sketch).
    ✨ Show Answer

    old.replaceWith(newEl);
    // or
    parent.replaceChild(newEl, old);

13. Show why setting style.color = "red" overrides CSS — and how to avoid it.
    ✨ Show Answer

    Inline styles win over external stylesheets (except for !important). Prefer toggling classes — it keeps style logic in CSS where it belongs.

14. Build a runnable "render todo list" simulation that converts an array to console.log lines.
    ✨ Show Answer

    a14.js

    const render = todos => todos.map(t =>
        `<li class="${t.done ? "done" : ""}">${t.text}</li>`);
    console.log(render([{ text: "কেনাকাটা", done: false }, { text: "পড়া", done: true }]));

    Run Copy

15. Why is the DOM API often called "imperative"?
    ✨ Show Answer

    Answer: You tell the browser the exact steps — "create this node, set this property, append it here." Frameworks like React invert that to declarative: you describe the UI as a function of state and the framework figures out the minimal DOM mutations.

16. Show how to clear all children of a list.
    ✨ Show Answer

    // Fast and clean
    ul.replaceChildren();
    // or
    ul.innerHTML = "";