Episode 1 — Fundamentals / 1.14 — DOM Manipulation
1.14 — Exercise Questions: DOM Manipulation
Practice questions for all six subtopics in Section 1.14. Mix of short-answer, prediction, and DevTools / mini-script tasks.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.14.a→1.14.f. - Answer closed-book first — then compare to the matching lesson.
- Use DevTools — Elements panel: inspect node types,
childNodesvschildrenin Console. - Interview prep —
1.14-Interview-Questions.md. - Quick review —
1.14-Quick-Revision.md.
1.14.a — Introduction (Q1–Q5)
Q1. Define DOM in one sentence.
Q2. Does changing the DOM rewrite the HTML file on disk? Explain.
Q3. What global object is the usual entry point for DOM APIs in a browser page?
Q4. Name two user-visible effects of calling document.body.appendChild(newDiv).
Q5. How does the DOM relate to the HTML string returned from the server?
1.14.b — Structure (Q6–Q12)
Q6. What is the difference between a node and an element?
Q7. What does document.documentElement refer to?
Q8. Name three kinds of nodes that are not elements.
Q9. What is Node.ELEMENT_NODE used for?
Q10. What is the inheritance relationship: is every HTMLElement a Node?
Q11. Why might console.dir(document.body) show properties not visible in the HTML source?
Q12. Hands-on: In Console, run document.body.nodeName and document.nodeName — what do you get?
1.14.c — Fetching (Q13–Q24)
Q13. Write a line that gets an element with id="root".
Q14. What does getElementById return if there is no match?
Q15. Is getElementsByClassName("a b") valid? What does it mean?
Q16. What is the difference between HTMLCollection from getElementsByTagName and NodeList from querySelectorAll regarding liveness?
Q17. Write a selector for querySelector that finds the first button with type="submit" inside #form.
Q18. How do you run querySelector starting from element instead of the whole document?
Q19. If you store const list = document.querySelectorAll(".item") and then add a new .item to the DOM, does list.length change?
Q20. Why should id values be unique?
Q21. True or false: querySelector can select by attribute. Give an example.
Q22. What happens if querySelector finds no match?
Q23. Hands-on: Count document.getElementsByTagName("div").length on a heavy page — then add a div in Console and recount if using getElementsByTagName.
Q24. When might getElementById be preferable to querySelector("#id")?
1.14.d — Traversal (Q25–Q34)
Q25. What is the difference between firstChild and firstElementChild?
Q26. Why is ul.firstChild sometimes a text node instead of <li>?
Q27. What does nextElementSibling skip that nextSibling does not?
Q28. If node.parentNode is null, what might that imply about node?
Q29. What does children return — nodes or only elements?
Q30. Write a line that gets from h2 to the next element sibling.
Q31. Is childNodes a live list?
Q32. Hands-on: Pick a <ul> in Elements → $0 in Console — compare $0.childNodes.length and $0.children.length.
Q33. When would you intentionally iterate childNodes instead of children?
Q34. What is parentElement vs parentNode?
1.14.e — Manipulation (Q35–Q46)
Q35. When should you use textContent instead of innerHTML for user-supplied strings?
Q36. What security risk is associated with innerHTML?
Q37. Set data-user-id="42" on el using setAttribute.
Q38. Read the href of an anchor a with getAttribute.
Q39. Set inline display: none via the style object.
Q40. Add class active with classList.
Q41. Toggle class open without a boolean — what method?
Q42. What is a difference between innerText and textContent?
Q43. Does el.style.width show the width from a CSS file?
Q44. Remove attribute disabled from a button — which method?
Q45. Exercise: Create a p, set safe user text from a variable, append to body.
Q46. True or false: classList.add("a", "b") can add two classes at once.
1.14.f — Create & remove (Q47–Q56)
Q47. Write three lines: create a div, set id, append to document.body.
Q48. What happens if you appendChild a node that already exists in the document?
Q49. Write insertBefore usage that prepends newEl to parent.
Q50. Why can parent.removeChild(child) throw NotFoundError?
Q51. What is the modern one-liner to remove el without referencing its parent?
Q52. What does createElement return before append — is it visible?
Q53. Exercise: Remove all li children from a ul using a while loop and removeChild (first child pattern).
Q54. Can appendChild append a string? If not, what do you use?
Q55. Name one advantage of element.remove() over removeChild.
Q56. Reflection: Which lesson (1.14.a–1.14.f) was weakest? List two follow-up actions.
Answer hints
| Q | Hint |
|---|---|
| Q16 | HTMLCollection live; querySelectorAll static NodeList |
| Q19 | No — snapshot; re-query to update |
| Q26 | Whitespace text nodes between tags |
| Q35–36 | XSS — textContent does not parse HTML |
| Q39 | el.style.display = "none" |
| Q48 | Node moves to new location |
| Q50 | child not a direct child of parent |
| Q51 | el.remove() |
← Back to 1.14 — DOM Manipulation (README)