DOM manipulation in JavaScript

Selecting and updating elements on a page.

const title = document.querySelector("h1");
const items = document.querySelectorAll(".item");

title.textContent = "Typing for coders";
title.classList.add("active");
title.dataset.state = "ready";

const li = document.createElement("li");
li.textContent = "new entry";
document.querySelector("ul").append(li);

items.forEach((item) => item.classList.toggle("seen"));

How it works

1. querySelector and querySelectorAll find elements.
2. textContent, classList, and dataset update them.
3. createElement plus append inserts new nodes.

Keywords and builtins used here

• const
• document

The run, in numbers

Lines

12

Characters to type

367

Tokens

89

Three-star pace

95 tpm

At the three-star pace of 95 tokens a minute, this run takes about 56 seconds.

Type this snippet

Step 1 of 3 in The DOM, step 1 of 13 in The browser.

Next →