DOM Manipulation & Events

Duration: 30 min

The DOM (Document Object Model) is a tree representation of your HTML. JavaScript can manipulate the DOM to dynamically change page content, styles, and structure. Events allow you to respond to user interactions.

Selecting Elements

Access HTML elements from JavaScript:

// Select by ID
let header = document.getElementById("header");

// Select by class (returns first match)
let button = document.querySelector(".btn");

// Select by class (returns all matches)
let buttons = document.querySelectorAll(".btn");

// Select by tag name
let paragraphs = document.getElementsByTagName("p");

// Select by class name
let highlights = document.getElementsByClassName("highlight");

// Iterate over multiple elements
buttons.forEach(btn => {
  console.log(btn.textContent);
});

Creating and Modifying Elements

Dynamically create and change DOM elements:

// Create new element
let newDiv = document.createElement("div");
newDiv.textContent = "Hello, World!";
newDiv.className = "container";
newDiv.id = "main";

// Add to page
document.body.appendChild(newDiv);

// Insert before another element
let parent = document.getElementById("parent");
let newElement = document.createElement("p");
parent.insertBefore(newElement, parent.firstChild);

// Modify existing element
let title = document.querySelector("h1");
title.textContent = "New Title";
title.innerHTML = "<strong>Bold Title</strong>";
title.style.color = "blue";
title.style.fontSize = "24px";

// Add/remove classes
title.classList.add("highlight");
title.classList.remove("old-style");
title.classList.toggle("active");

// Set attributes
let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");
let href = link.getAttribute("href");

// Remove element
let oldElement = document.getElementById("old");
oldElement.remove();

Event Listeners

Respond to user interactions:

// Click event
let button = document.querySelector("button");
button.addEventListener("click", function() {
  console.log("Button clicked!");
});

// Arrow function syntax
button.addEventListener("click", () => {
  console.log("Button clicked!");
});

// Event object contains information
button.addEventListener("click", (event) => {
  console.log(event.target);        // Element that triggered event
  console.log(event.type);          // "click"
  event.preventDefault();           // Stop default behavior
  event.stopPropagation();          // Stop event bubbling
});

// Common events
document.addEventListener("DOMContentLoaded", () => {
  console.log("Page loaded");
});

let input = document.querySelector("input");
input.addEventListener("change", (e) => {
  console.log("Input changed:", e.target.value);
});

input.addEventListener("keyup", (e) => {
  console.log("Key pressed:", e.key);
});

let form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submitted");
});

document.addEventListener("mouseover", (e) => {
  console.log("Mouse over:", e.target);
});

Event Bubbling and Delegation

Events bubble up through parent elements:

// Event bubbling
let parent = document.querySelector(".parent");
let child = document.querySelector(".child");

parent.addEventListener("click", () => {
  console.log("Parent clicked");
});

child.addEventListener("click", (e) => {
  console.log("Child clicked");
  // e.stopPropagation();  // Prevent bubbling
});

// Event delegation: listen on parent, act on children
let list = document.querySelector("ul");
list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("List item clicked:", e.target.textContent);
    e.target.classList.toggle("selected");
  }
});

Dynamic Content

Create interactive experiences:

// Add items to a list
let list = document.querySelector("ul");
let input = document.querySelector("input");
let addBtn = document.querySelector(".add-btn");

addBtn.addEventListener("click", () => {
  let item = document.createElement("li");
  item.textContent = input.value;
  list.appendChild(item);
  input.value = "";
});

// Toggle visibility
let toggle = document.querySelector(".toggle-btn");
let content = document.querySelector(".content");

toggle.addEventListener("click", () => {
  if (content.style.display === "none") {
    content.style.display = "block";
  } else {
    content.style.display = "none";
  }
});

// Update content from user input
let nameInput = document.querySelector("#name");
let greeting = document.querySelector(".greeting");

nameInput.addEventListener("keyup", (e) => {
  greeting.textContent = "Hello, " + e.target.value;
});

// Form validation
let emailInput = document.querySelector("#email");
let submitBtn = document.querySelector("button[type='submit']");

submitBtn.addEventListener("click", (e) => {
  if (!emailInput.value.includes("@")) {
    e.preventDefault();
    alert("Please enter a valid email");
  }
});

Traversing the DOM

Navigate between elements:

let element = document.querySelector(".item");

// Parent and children
let parent = element.parentElement;
let children = element.children;
let firstChild = element.firstElementChild;
let lastChild = element.lastElementChild;

// Siblings
let nextSibling = element.nextElementSibling;
let prevSibling = element.previousElementSibling;

// Closest parent matching selector
let container = element.closest(".container");

// Query within element
let buttons = element.querySelectorAll("button");