🌳 JavaScript

JavaScript DOM Manipulation — The Practical Guide

📅 Jun 15, 2026 ⏱ 5 min read

The DOM is your HTML as a live JavaScript object tree. Manipulating it is the core skill behind every interactive page.

Select

const btn  = document.querySelector("#save");        // first match
const rows = document.querySelectorAll(".row");       // all — loop with forEach

Change — safely

el.textContent = userInput;   // ✅ text only — XSS-safe
el.innerHTML   = userInput;   // ❌ NEVER with user input — script injection
el.classList.add("active");   // toggle(), remove(), contains()
el.style.setProperty("--x", "10px");

Create & insert

const li = document.createElement("li");
li.textContent = "New task";
list.append(li);      // or prepend(), or el.remove()

Event delegation — the senior move

// one listener handles ALL rows, even future ones
list.addEventListener("click", (e) => {
  const row = e.target.closest(".row");
  if (row) row.classList.toggle("done");
});

Full lessons: DOM Intro · Manipulation · Events.

← All Articles