JavaScript DOM and Browser API Cheat Sheet

const form = document.querySelector("form.login");

const buttons = document.querySelectorAll("[data-action]");

const app = document.getElementById("app");

const card = event.target.closest(".card");

el.classList.add("is-open");
el.classList.remove("hidden");
el.classList.toggle("active");

const li = document.createElement("li");
li.textContent = "New item";

list.append(li);
// or list.appendChild(li);

container.insertAdjacentHTML("beforeend", "<p>Hello</p>");

node.remove();

list.replaceChildren(...newItems);

el.textContent = "<safe text>";
el.innerHTML = "<strong>Unsafe unless trusted</strong>";

const id = card.dataset.id;

button.addEventListener("click", handleClick);

window.addEventListener("scroll", onScroll, { passive: true });

button.removeEventListener("click", handleClick);

list.addEventListener("click", (event) => {
  const item = event.target.closest("[data-id]");
  if (!item) return;
  console.log(item.dataset.id);
});

link.addEventListener("click", (event) => {
  event.preventDefault();
  event.stopPropagation();
});

el.dispatchEvent(new CustomEvent("cart:add", { detail: { sku: "ABC" } }));

const controller = new AbortController();
window.addEventListener("resize", onResize, { signal: controller.signal });
controller.abort();

localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");

sessionStorage.setItem("draft", JSON.stringify(draft));

const params = new URLSearchParams(location.search);
const q = params.get("q");

history.pushState({ tab: "profile" }, "", "?tab=profile");

await navigator.clipboard.writeText(code);

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => console.log(entry.isIntersecting));
});
observer.observe(target);

const ro = new ResizeObserver((entries) => {
  console.log(entries[0].contentRect.width);
});
ro.observe(element);

const darkMode = window.matchMedia("(prefers-color-scheme: dark)");

const formData = new FormData(form);
const email = formData.get("email");

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  await save(formData);
});

if (!form.checkValidity()) {
  form.reportValidity();
}

const qty = input.valueAsNumber;

const file = fileInput.files?.[0];