📄 DOM Manipulation

What is the DOM?

The DOM (Document Object Model) is the browser's in-memory tree representation of your HTML. JavaScript can read and modify the DOM to change what users see — without reloading the page. Every HTML element is a node in the tree.

Selecting Elements

// By ID (fastest, returns one element)
const el = document.getElementById("hero");

// By CSS selector (returns first match)
const btn = document.querySelector(".btn");

// All matches — returns NodeList
const cards = document.querySelectorAll(".card");

Modifying Elements

el.textContent = "New text";          // text only (safe)
el.innerHTML = "<strong>Bold</strong>"; // parses HTML

el.style.color = "#4ade80";           // inline style
el.classList.add("active");           // add CSS class
el.classList.remove("active");        // remove class
el.classList.toggle("dark");          // toggle class

// Create and insert new elements
const li = document.createElement("li");
li.textContent = "New item";
list.appendChild(li);

// Remove an element
el.remove();