Lesson 3.2Lesson 13 of 24
Working with the DOM
Given a business requirement, evaluate and manipulate the DOM.
Key points
- 1querySelector returns the first match or null; querySelectorAll returns a static NodeList that does not change when the page does.
- 2getElementsByClassName and getElementsByTagName return live HTMLCollections that update as elements are added, removed or reclassed.
- 3textContent sets plain text and is safe for user input. innerHTML parses HTML, can run code through injected attributes such as onerror, and rebuilds every child node.
- 4createElement, then append, prepend or before to insert, and remove to delete. classList adds, removes and toggles one class without touching the others.
- 5Attributes hold the initial markup values; properties such as input.value hold the current state. data-* attributes are read through dataset in camelCase.
What the exam guide checks here
Objective wording from the exam guide (English).
- 3.2.K1Selecting elements: querySelector(All), getElementById, live vs static collections
- 3.2.K2Creating, inserting and removing nodes; textContent vs innerHTML; attributes and classList
- 3.2.S1Choose the DOM code that produces the required page change
Lock it in
Answer scenario questions on this topic. Every option comes with an explanation.
Practise 3.2 · 12 questions