Native DOM & Web APIs Cheat Sheet

// Select single or multiple elements
const mainTitle = document.querySelector("#main-title");
const activeItems = document.querySelectorAll(".nav-item.active");

// Class & Attribute manipulation
mainTitle.classList.add("highlight", "visible");
mainTitle.classList.toggle("dark-mode");
mainTitle.setAttribute("data-state", "open");

// Dynamic Element Creation & Insertion
const newCard = document.createElement("div");
newCard.className = "card";
newCard.textContent = "Card Content";
document.body.appendChild(newCard);

const listContainer = document.querySelector("#item-list");

listContainer.addEventListener("click", (event) => {
  const target = event.target;
  if (target.matches("button.delete-btn")) {
    const itemId = target.closest("li").dataset.id;
    console.log("Delete item:", itemId);
  }
});

// IntersectionObserver: Infinite scroll / Lazy loading
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log("Element is visible in viewport:", entry.target);
    }
  });
}, { threshold: 0.5 });

observer.observe(document.querySelector("#sentinel"));