The DOM

Reach into the page from JavaScript. Select elements, change content, toggle classes, and create new nodes — without external libraries.

DOMquerySelectorclassListinnerHTML

Duration

⏱ About 2 hours

Level

📊 Beginner+

Prerequisite

🎯 js-05

OUTCOME

Manipulate the page dynamically with vanilla JavaScript

What you'll learn

1Select elements with querySelector / All
2Read and write text and HTML safely
3Toggle classes for state-driven styling
4Create, append, and remove DOM nodes

1. Selecting

javascript

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

items.forEach(el => console.log(el.textContent));

2. Reading & Writing

javascript

title.textContent = "New title";          // safe text
title.innerHTML   = "<strong>HTML</strong>"; // parses as HTML

const input = document.querySelector("#name");
input.value = "Alice";        // form value
title.setAttribute("id", "main-title");

⚠️

Prefer textContent over innerHTML. innerHTML with user data is an XSS risk — see security lectures.

3. Classes & Styles

javascript

el.classList.add("active");
el.classList.remove("active");
el.classList.toggle("open");
el.classList.contains("active");

el.style.backgroundColor = "crimson";  // direct inline (avoid for state — use classes)
el.style.setProperty("--accent", "#22c55e");

4. Create / Append / Remove

javascript

const li = document.createElement("li");
li.textContent = "New task";
li.classList.add("task");
document.querySelector("ul").appendChild(li);

li.remove();          // remove from DOM
ul.replaceChildren(); // clear all children

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗