Browser and Events17% of the exam
Selecting and manipulating the DOM
Which selection methods return static or live collections, how textContent, innerText and innerHTML differ (including the XSS risk), how to create, insert and remove nodes without destroying listeners, how attributes differ from properties and dataset, and how defer and DOMContentLoaded make sure the DOM exists before a script runs.
Given a business requirement, evaluate and manipulate the DOM.
~7 min read · 12 practice questions ·
What the exam expects
- Select one element or a scoped set with
querySelector,querySelectorAllandgetElementById/getElementsBy*, and predict whether the collection is live or static. - Read and write content with
textContent,innerTextandinnerHTML, choosing the one that cannot run injected markup. - Create, insert and remove nodes (
createElement,append/appendChild,insertAdjacentHTML,remove) without discarding existing listeners. - Change classes with
classList, readdata-*values withdataset, tell attributes from properties, and walk up to an ancestor withclosest(). - Make a script find its elements with script placement,
deferorDOMContentLoaded. - Key terms: DOM (the object tree the browser builds from the page); node (any item in the tree, including text and comments); element (a node for a tag); live collection (updates as the DOM changes); static NodeList (a snapshot taken at call time); XSS (cross-site scripting: attacker markup running as script).
Key facts
querySelectorAll result- Detail
- Static NodeList;
forEachworks, convert withArray.from()for array methods
getElementsByClassName result- Detail
- Live HTMLCollection; argument is class names, not a selector
childNodes vs children- Detail
childNodesincludes whitespace text nodes;childrenonly elements
Setting
textContent- Detail
- Replaces all children with one text node; markup shows literally
Setting
innerHTML- Detail
- Parses HTML and replaces all descendants
insertAdjacentHTML- Detail
- Does not reparse existing children
appendChild vs append- Detail
appendChildtakes one Node;appendalso takes strings and several items
createElement('<li>')- Detail
- Throws
InvalidCharacterError; pass the bare tag name
data-order-id- Detail
- Read as
dataset.orderId, always a string
<input value> attribute- Detail
- Initial value only; the
valueproperty is current
defer- Detail
- Runs after parsing, before
DOMContentLoaded
Sources for this section (12)
- querySelectorAll()developer.mozilla.org (opens in a new tab)
- NodeListdeveloper.mozilla.org (opens in a new tab)
- getElementsByClassName()developer.mozilla.org (opens in a new tab)
- childNodesdeveloper.mozilla.org (opens in a new tab)
- textContentdeveloper.mozilla.org (opens in a new tab)
- innerHTMLdeveloper.mozilla.org (opens in a new tab)
- insertAdjacentHTML()developer.mozilla.org (opens in a new tab)
- append()developer.mozilla.org (opens in a new tab)
- createElement()developer.mozilla.org (opens in a new tab)
- datasetdeveloper.mozilla.org (opens in a new tab)
- inputdeveloper.mozilla.org (opens in a new tab)
- scriptdeveloper.mozilla.org (opens in a new tab)
- Why does a list reached through `getElementsByClassName` report a new length after an append while a `querySelectorAll` result does not?
- When does `defer` run a script relative to `DOMContentLoaded`?
- Why does `textContent` block an XSS payload that `innerHTML` would run?
- Which expression reads `data-product-id="42"` from an element `li`?
- Which call removes an element when you hold only a reference to it?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the JavaScript Developer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 24 lessons of the JavaScript Developer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (12 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams