JavaScript DOM Manipulation: Change Pages Without Reloading

DOM manipulation in JavaScript is how you make web pages interactive. Every time you click a button and something changes without the page reloading, that’s JavaScript talking to the DOM (Document Object Model). Let’s learn how it works.

What Is the DOM?

The DOM is a tree-like representation of your HTML document. JavaScript can read and modify this tree — adding, removing, or changing elements in real time. Every HTML element is a node in this tree.

Selecting Elements

Before you can change anything, you need to select it:

// Select by ID (returns one element)
const title = document.getElementById("main-title");

// Select by CSS selector (returns first match)
const btn = document.querySelector(".submit-btn");

// Select all matching elements (returns NodeList)
const cards = document.querySelectorAll(".card");

querySelector and querySelectorAll accept any CSS selector, making them the most flexible options.

Changing Content and Attributes

const heading = document.querySelector("h1");

// Change text content (safe — no HTML parsing)
heading.textContent = "Welcome back, Kaikobud!";

// Change HTML content (use carefully — XSS risk with user input)
heading.innerHTML = "Welcome <strong>back</strong>!";

// Change attributes
const link = document.querySelector("a");
link.href = "https://kaiko.dev";
link.setAttribute("target", "_blank");

Modifying Styles and Classes

const box = document.querySelector(".box");

// Direct style (use sparingly — prefer classes)
box.style.backgroundColor = "blue";
box.style.fontSize = "18px";

// Toggle classes (the clean way)
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("dark-mode");
box.classList.contains("active"); // true or false

Using classList keeps your styling in CSS where it belongs.

Creating and Adding Elements

// Create a new element
const newItem = document.createElement("li");
newItem.textContent = "New list item";
newItem.classList.add("list-item");

// Add it to the DOM
const list = document.querySelector("ul");
list.appendChild(newItem);

// Remove an element
const oldItem = document.querySelector(".old-item");
oldItem.remove();

Conclusion

DOM manipulation in JavaScript is the bridge between static HTML and interactive web pages. Master querySelector, textContent, classList, and createElement — these four tools handle the vast majority of what you’ll need. Practice by building a small to-do list or a dynamic form without any framework.

Read next: JavaScript Event Listeners: Responding to User Actions

External resource: MDN — Introduction to the DOM