DOM Manipulation

The Document Object Model (DOM) is a programming interface for web documents. It represents the page as a tree of objects that JavaScript can read and modify, allowing you to create dynamic, interactive web pages.

What is the DOM?

When a browser loads an HTML page, it builds a tree structure called the DOM. Each HTML element becomes a node in that tree, and JavaScript can access and modify any node.

// The entire document is available via the document object
console.log(document.title);
console.log(document.URL);

Selecting Elements

// By ID
const header = document.getElementById("main-header");

// By CSS selector (returns first match)
const button = document.querySelector(".btn-primary");
const input = document.querySelector("input[type='email']");

// By CSS selector (returns all matches as NodeList)
const allButtons = document.querySelectorAll("button");
const listItems = document.querySelectorAll("li");

// Iterate over a NodeList
listItems.forEach(item => console.log(item.textContent));

Reading and Modifying Content

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

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

// Set content
heading.textContent = "New Heading";
heading.innerHTML = "Heading with <strong>bold</strong>";

Changing Styles and Classes

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

// Inline styles
box.style.backgroundColor = "blue";
box.style.width = "200px";
box.style.display = "none";  // hide element

// Class manipulation (preferred over inline styles)
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("selected");    // add if missing, remove if present
box.classList.contains("active");   // true or false

Creating and Inserting Elements

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

// Add to the DOM
const list = document.querySelector("ul");
list.appendChild(li);              // add at end
list.prepend(li);                  // add at start
list.insertBefore(li, list.firstChild);

// Remove an element
li.remove();

Handling Events

Events let you respond to user actions:

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

button.addEventListener("click", function(event) {
  event.preventDefault();  // stop form submission
  console.log("Button clicked!");
});

// Arrow function style
button.addEventListener("click", (e) => {
  console.log("Clicked at:", e.clientX, e.clientY);
});

// Common events
// "click", "dblclick", "mouseover", "mouseout"
// "keydown", "keyup", "keypress"
// "submit", "change", "input", "focus", "blur"
// "load", "DOMContentLoaded", "resize", "scroll"

Reading Form Values

const emailInput = document.querySelector("#email");
const value = emailInput.value;

document.querySelector("form").addEventListener("submit", (e) => {
  e.preventDefault();
  const name = document.querySelector("#name").value;
  const email = document.querySelector("#email").value;
  console.log("Submitted:", name, email);
});

DOM manipulation is how JavaScript brings web pages to life. Combine selecting elements, modifying content, and responding to events to build rich, interactive user interfaces.