Today
- Buy detergent
- Pay the electricity bill
- Clean the Okafor flat
3 tasks
All jobs- `: anything with a tag |
| Text node | 3 | The words inside an element, *and the line breaks and spaces between tags* |
| Comment node | 8 | `` |
| Document node | 9 | `document` itself |
An **element** is a node that came from a tag. The difference matters because the whitespace you use to indent HTML becomes text nodes. This walks the tree recursively (the technique from [Recursion](https://zudojs.oyinlola.site/learn/js-recursion)) and prints every node under `#app`:
walk.js
```ts
function describe(node) {
if (node.nodeType === Node.ELEMENT_NODE) return `<${node.tagName.toLowerCase()}>`;
if (node.nodeType === Node.TEXT_NODE) {
return node.textContent.trim() === "" ? "(whitespace)" : JSON.stringify(node.textContent);
}
if (node.nodeType === Node.COMMENT_NODE) return "";
return node.nodeName;
}
function walk(node, depth = 0) {
console.log(" ".repeat(depth) + describe(node));
for (const child of node.childNodes) walk(child, depth + 1);
}
walk(document.querySelector("#tasks"));
const app = document.querySelector("#app");
console.log("childNodes of #app:", app.childNodes.length, "children of #app:", app.children.length);
```
What the browser terminal prints
```ts
- "Buy detergent" (whitespace)
- "Pay the electricity bill" (whitespace)
- "Clean the Okafor flat" (whitespace) childNodes of #app: 11 children of #app: 4 ``` `childNodes` gives *every* child node, whitespace included; `children` gives only the element children. `#app` has 4 elements (`h1`, `ul`, `p`, `a`) but 11 nodes. Most of the time you want elements, so most of the time you want the properties with `Element` in their name, which you will meet in the section on moving around the tree. Each node is an object made from a class, and the classes form a prototype chain, as you saw in [Prototypes](https://zudojs.oyinlola.site/learn/js-prototypes). An `
- ` is an `HTMLLIElement`, which is an `HTMLElement`, which is an `Element`, which is a `Node`, which is an `EventTarget`. That is why every element has `textContent` (from `Node`), `querySelector` (from `Element`) and `addEventListener` (from `EventTarget`):
chain.js
```ts
const li = document.querySelector("li");
const chain = [];
for (let proto = Object.getPrototypeOf(li); proto; proto = Object.getPrototypeOf(proto)) {
chain.push(proto.constructor.name);
}
console.log(chain.join(" -> "));
console.log(li instanceof HTMLElement, li instanceof Node, li instanceof EventTarget);
```
What the browser terminal prints
```ts
HTMLLIElement -> HTMLElement -> Element -> Node -> EventTarget -> Object
true true true
```
> NOTE
>
> The DOM is not part of JavaScript. It is a **Web API**: an interface the browser gives to JavaScript, specified by the WHATWG DOM and HTML standards. Node.js runs the same JavaScript language without a `document`, which is why these examples only run in the browser. [Browser APIs](https://zudojs.oyinlola.site/learn/browser-apis) looks at the other Web APIs.
## Finding elements
Before you can change an element you need a reference to it. The modern tools take a **CSS selector**, the same pattern language you use in stylesheets:
- `document.querySelector(selector)` returns the *first* matching element, or `null`.
- `document.querySelectorAll(selector)` returns *all* matches as a `NodeList`, which you can loop over with `for...of` or turn into an array with `[...list]`.
- `document.getElementById(id)` is the older, direct way to find one element by its `id`.
Both query methods also exist on every element, and then they search only inside that element:
find.js
```ts
const titles = (elements) => [...elements].map((el) => el.textContent);
console.log(document.querySelector("li").textContent);
console.log(titles(document.querySelectorAll("li.task:not(.done)")));
console.log(titles(document.querySelectorAll('[data-id="3"]')));
console.log(document.getElementById("tasks") === document.querySelector("#tasks"));
const list = document.querySelector("#tasks");
console.log(list.querySelectorAll("li").length, document.querySelectorAll("*").length);
console.log(document.querySelector(".invoice"));
```
What the browser terminal prints
```ts
Buy detergent
[ 'Buy detergent', 'Clean the Okafor flat' ]
[ 'Clean the Okafor flat' ]
true
3 14
null
```
The last line is the one that bites. `querySelector` returns `null` when nothing matches, and the very next line, `.textContent` on `null`, throws a `TypeError`. A typo in a selector, or an element that another script removed, fails far away from its cause. For elements your page cannot work without, fail loudly and early with a helper that names the selector:
must-find.js
```ts
function mustFind(selector, root = document) {
const el = root.querySelector(selector);
if (el === null) throw new Error(`Page is missing ${selector}`);
return el;
}
console.log(mustFind("#tasks").id);
try {
mustFind("#task").textContent;
} catch (error) {
console.log(error.message);
}
try {
document.querySelector("#task").textContent;
} catch (error) {
console.log(error.name + ": " + error.message);
}
```
What the browser terminal prints
```ts
tasks
Page is missing #task
TypeError: Cannot read properties of null (reading 'textContent')
```
Two more selector methods help when you already have an element: `el.matches(selector)` asks "does this element match?", and `el.closest(selector)` walks *up* from the element (starting with itself) and returns the first ancestor that matches. `closest` is the key to event delegation in [the next lesson](https://zudojs.oyinlola.site/learn/browser-events).
closest.js
```ts
const bill = document.querySelector('[data-id="2"]');
console.log(bill.matches(".done"), bill.matches(".task:not(.done)"));
console.log(bill.closest("ul").id, bill.closest("main").id);
console.log(bill.closest("form"));
```
What the browser terminal prints
```ts
true false
tasks app
null
```
### Live and static collections
`querySelectorAll` returns a **static** list: a snapshot of the matches at the moment you called it. The older `getElementsByClassName` and `getElementsByTagName` return a **live** `HTMLCollection` that updates itself whenever the document changes. Watch both after a fourth task is added:
live.js
```ts
const live = document.getElementsByClassName("task");
const snapshot = document.querySelectorAll(".task");
const item = document.createElement("li");
item.className = "task";
item.textContent = "Order new mop heads";
document.querySelector("#tasks").append(item);
console.log("live:", live.length, "snapshot:", snapshot.length);
```
What the browser terminal prints
```ts
live: 4 snapshot: 3
```
A live collection sounds convenient, and it causes one of the classic DOM bugs, which you will see in [When DOM code fails](#failures). Prefer `querySelectorAll`: a snapshot never changes under your feet.
## Moving around the tree
From any node you can reach its relatives. There are two sets of properties, and the difference is the whitespace you saw earlier:
| Any node (includes text) | Elements only |
| --- | --- |
| `parentNode` | `parentElement` |
| `childNodes` | `children` |
| `firstChild`, `lastChild` | `firstElementChild`, `lastElementChild` |
| `nextSibling`, `previousSibling` | `nextElementSibling`, `previousElementSibling` |
traverse.js
```ts
const list = document.querySelector("#tasks");
const first = list.firstElementChild;
console.log(JSON.stringify(list.firstChild.textContent));
console.log(first.textContent);
console.log(first.nextElementSibling.textContent);
console.log(JSON.stringify(first.nextSibling.textContent));
console.log(list.lastElementChild.dataset.id, list.parentElement.id);
console.log(list.previousElementSibling.nodeName, list.nextElementSibling.className);
```
What the browser terminal prints
```ts
"\n "
Buy detergent
Pay the electricity bill
"\n "
3 app
H1 summary
```
`firstChild` is the line break and indentation after `
- `, not the first task. If code that worked yesterday breaks after someone reformats the HTML, look for a `firstChild` or `nextSibling` that should have been the `Element` version. Better still, don't depend on the exact shape of the tree: find elements by selector, with `closest` and `querySelector`, so that adding a wrapper `
- ${title} `; const img = list.querySelector("img"); await new Promise((resolve) => img.addEventListener("error", resolve)); console.log("images in the list:", list.querySelectorAll("img").length); console.log(window.stolen); ``` What the browser terminal prints ```ts images in the list: 1 attacker code ran ``` The browser parsed the title as HTML, created a real `
- Buy detergent
` later breaks nothing. ## Reading and changing content Three properties read and write what is inside an element: - `textContent`: all the text inside, as plain text. Setting it replaces every child with a single text node. Whatever string you give it is shown as text, even if it looks like HTML. - `innerHTML`: the inside as an HTML string. Setting it makes the browser *parse* your string as HTML and build new elements from it. - `innerText`: like `textContent`, but it follows the CSS: it leaves out hidden text and adds line breaks where the layout has them. It has to ask the browser how the page is laid out, which makes it slower. Use `textContent` unless you really want "the text as the user sees it". content.js ```ts const summary = document.querySelector(".summary"); summary.textContent = "4 tasks today"; console.log(summary.textContent); console.log(summary.innerHTML); console.log(summary.children.length); summary.innerHTML = "4 tasks today"; console.log(summary.textContent); console.log(summary.children.length, summary.firstElementChild.tagName); ``` What the browser terminal prints ```ts 4 tasks today 4 tasks <b>today</b> 0 4 tasks today 1 B ``` With `textContent`, the angle brackets are just characters: `innerHTML` shows them escaped as `<` and `>`, and no `` element exists. With `innerHTML`, the browser built a real `` element. That difference is harmless for a string you wrote. It is dangerous for a string a *user* wrote. ### innerHTML and XSS Task titles come from users. Suppose someone saves a task with this title. It looks like a broken image tag, and it contains a small program in its `onerror` attribute: xss.js ```ts const title = `Fix sink`; const list = document.querySelector("#tasks"); list.innerHTML += `
`, failed to load the empty image, and ran the attacker's `onerror` code, in your page, with your page's permissions. This is **cross-site scripting** (**XSS**): an attacker gets their script to run on your site. Here it only set a variable. A real one would read the user's data, send requests as the logged-in user, or replace the login form with one that sends the password elsewhere. Every other user who opens the task list runs it too. The fix costs nothing: put user text in with `textContent`, on an element you created yourself: safe.js ```ts const title = `Fix sink
-
(whitespace)