# Selecting and manipulating the DOM

*JavaScript Developer Study Guide · Browser and Events · Last updated October 16, 2026 · https://www.certifyforce.com/study-guide/javascript-developer/browser-and-events/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.

- Certification: Salesforce JavaScript Developer
- Exam section: Browser and Events
- Study guide: https://www.certifyforce.com/study-guide/javascript-developer

**Official exam objective:**

> Given a business requirement, evaluate and manipulate the DOM.

## What the exam expects

- Select one element or a scoped set with `querySelector`, `querySelectorAll` and `getElementById`/`getElementsBy*`, and predict whether the collection is live or static.
- Read and write content with `textContent`, `innerText` and `innerHTML`, 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`, read `data-*` values with `dataset`, tell attributes from properties, and walk up to an ancestor with `closest()`.
- Make a script find its elements with script placement, `defer` or `DOMContentLoaded`.
- 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

| Fact | Detail | Source |
|---|---|---|
| `querySelectorAll` result | Static NodeList; `forEach` works, convert with `Array.from()` for array methods | [querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll), [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) |
| `getElementsByClassName` result | Live HTMLCollection; argument is class names, not a selector | [getElementsByClassName()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName) |
| `childNodes` vs `children` | `childNodes` includes whitespace text nodes; `children` only elements | [childNodes](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes) |
| Setting `textContent` | Replaces all children with one text node; markup shows literally | [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) |
| Setting `innerHTML` | Parses HTML and replaces all descendants | [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) |
| `insertAdjacentHTML` | Does not reparse existing children | [insertAdjacentHTML()](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML) |
| `appendChild` vs `append` | `appendChild` takes one Node; `append` also takes strings and several items | [append()](https://developer.mozilla.org/en-US/docs/Web/API/Element/append) |
| `createElement('<li>')` | Throws `InvalidCharacterError`; pass the bare tag name | [createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) |
| `data-order-id` | Read as `dataset.orderId`, always a string | [dataset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) |
| `<input value>` attribute | Initial value only; the `value` property is current | [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) |
| `defer` | Runs after parsing, before `DOMContentLoaded` | [script](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script) |

## Check yourself

- 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?

## Sources

- [DOM scripting introduction](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting)
- [Document Object Model (DOM)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
- [Document: querySelectorAll() method](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)
- [Element: getElementsByClassName() method](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName)
- [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
- [Document: getElementById() method](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)
- [Node: childNodes property](https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes)
- [Element: children property](https://developer.mozilla.org/en-US/docs/Web/API/Element/children)
- [Node: textContent property](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
- [Element: innerHTML property](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)
- [Element: insertAdjacentHTML() method](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)
- [Document: createElement() method](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
- [Element: append() method](https://developer.mozilla.org/en-US/docs/Web/API/Element/append)
- [Element: closest() method](https://developer.mozilla.org/en-US/docs/Web/API/Element/closest)
- [Element: classList property](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
- [HTMLElement: dataset property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset)
- [Element: getAttribute() method](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)
- [<input>: The HTML Input element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input)
- [<script>: The Script element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script)
- [Document: DOMContentLoaded event](https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 12 linked practice questions, and unlimited timed mock exams are included with the JavaScript Developer pack (USD $19): https://www.certifyforce.com/practice-exams