DOM Manipulation — Changing HTML with JavaScript

What is the DOM?

When a browser loads your HTML, it creates a tree structure of objects called the DOM (Document Object Model). JavaScript can read and modify this tree — changing text, styles, adding or removing elements — without reloading the page.

Selecting Elements

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

// Select first matching element (most common)
const btn = document.querySelector(".submit-btn");
const nav = document.querySelector("nav");
const input = document.querySelector("#email-input");

// Select ALL matching elements
const cards = document.querySelectorAll(".card");
const links = document.querySelectorAll("nav a");

cards.forEach(card => console.log(card.textContent));

Reading and Changing Content

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

// Read content
console.log(heading.textContent);  // Plain text
console.log(heading.innerHTML);    // HTML including tags

// Change content
heading.textContent = "Welcome to Zero2Tech!";
heading.innerHTML = "Welcome to <span>Zero2Tech</span>!";

Changing Styles and Classes

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

// Inline styles
card.style.backgroundColor = "#7c3aed";
card.style.color = "white";
card.style.borderRadius = "12px";

// Classes (better approach)
card.classList.add("active");
card.classList.remove("hidden");
card.classList.toggle("selected");   // add if absent, remove if present
card.classList.contains("active");   // true or false

Changing Attributes

const img = document.querySelector("img");
img.src = "new-image.jpg";
img.alt = "Updated description";

const link = document.querySelector("a");
link.href = "https://zero2tech.in";

const input = document.querySelector("input");
input.placeholder = "Enter your email...";
input.disabled = true;

Creating and Adding Elements

// Create a new element
const newCard = document.createElement("div");
newCard.className = "card";
newCard.innerHTML = `
  <h3>New Tutorial</h3>
  <p>JavaScript DOM manipulation.</p>
  <span class="tag">Beginner</span>
`;

// Add to the page
const grid = document.querySelector(".cards-grid");
grid.appendChild(newCard);      // add at END
grid.prepend(newCard);          // add at BEGINNING

Events — Making Pages Interactive

const btn = document.querySelector("#submit-btn");

btn.addEventListener("click", function() {
  console.log("Button clicked!");
});

// Arrow function version
btn.addEventListener("click", () => {
  btn.textContent = "Submitted!";
  btn.disabled = true;
});

// Other common events
document.querySelector("input").addEventListener("input", (e) => {
  console.log("Typing:", e.target.value);
});

document.querySelector("form").addEventListener("submit", (e) => {
  e.preventDefault();  // stop form from reloading page
  console.log("Form submitted");
});

Real-World Example — Like Button

<!-- HTML -->
<button id="like-btn">❤ Like (0)</button>

// JavaScript
const likeBtn = document.getElementById("like-btn");
let likeCount = 0;

likeBtn.addEventListener("click", () => {
  likeCount++;
  likeBtn.textContent = `Liked! (${likeCount})`;
  likeBtn.style.background = "#f43f5e";
  likeBtn.style.color = "white";
});

Real-World Example — Dynamic List

const tutorials = ["HTML Basics", "CSS Flexbox", "JavaScript DOM"];
const list = document.getElementById("tutorial-list");

tutorials.forEach(title => {
  const li = document.createElement("li");
  li.textContent = title;
  list.appendChild(li);
});

Try It Yourself

1. Build a counter: two buttons (+ and -) and a number display. Each click updates the count.
2. Build a to-do item adder: input + button. Clicking adds a new <li> to a list.
3. On form submit, prevent default and display the input value in a paragraph below.