JavaScript DOM Manipulation Cheat Sheet

document.getElementById("app");             // Single element by iddocument.querySelector(".card");             // First match (CSS selector)document.querySelectorAll(".card");          // NodeList of all matchesdocument.getElementsByClassName("card");     // Live HTMLCollectiondocument.getElementsByTagName("li");         // Live HTMLCollection// Iterating a NodeListdocument.querySelectorAll(".card").forEach(el => console.log(el));

const el = document.createElement("div");el.textContent = "Hello";          // Safe text (no HTML parsing)el.innerHTML = "<b>Hello</b>";     // Parses HTML (careful with user input)el.setAttribute("data-id", "42");el.id = "greeting";document.body.appendChild(el);       // Add as last childparent.insertBefore(el, referenceNode);el.remove();                         // Remove from the DOMconst clone = el.cloneNode(true);    // Deep clone (true = include children)

const btn = document.querySelector("#submit");btn.addEventListener("click", (event) => {  event.preventDefault();     // Stop default action (e.g. form submit)  console.log("clicked", event.target);});btn.removeEventListener("click", handlerFn);// Event delegation: listen on a parent, filter by targetdocument.querySelector("ul").addEventListener("click", (e) => {  if (e.target.matches("li")) {    console.log("item clicked:", e.target.textContent);  }});

const el = document.querySelector(".box");el.classList.add("active");el.classList.remove("hidden");el.classList.toggle("open");el.classList.contains("active");   // true/falseel.style.backgroundColor = "coral";el.style.setProperty("--gap", "8px");   // Set a CSS custom property