DOM

// Single element — returns Element or null
document.getElementById("main")
document.querySelector(".card")          // first match, any CSS selector
document.querySelector("#nav > a.active")

// Multiple elements — returns NodeList (not a live array)
document.querySelectorAll(".item")       // NodeList — iterable but not Array
document.querySelectorAll("li, dt")      // multiple selectors

// Convert NodeList to Array for full array methods
Array.from(document.querySelectorAll(".item"))
[...document.querySelectorAll(".item")]

// Legacy methods
document.getElementsByTagName("div")    // HTMLCollection (live)
document.getElementsByClassName("card") // HTMLCollection (live)
document.getElementsByName("email")     // NodeList

// Relative to an element
el.querySelector(".child")
el.querySelectorAll("td")
el.closest(".container")     // nearest ancestor matching selector (walks up)
el.matches(".active")        // boolean — does el match this selector?

// Parent
el.parentElement          // parent Element (or null)
el.parentNode             // parent Node (can be document, etc.)

// Children
el.children               // HTMLCollection of child Elements only
el.childNodes             // NodeList of all child nodes (incl. text)
el.firstElementChild      // first child Element
el.lastElementChild       // last child Element
el.firstChild             // first node (may be text node)
el.lastChild              // last node (may be text node)
el.childElementCount      // number of child elements

// Siblings
el.nextElementSibling     // next sibling Element
el.previousElementSibling // previous sibling Element
el.nextSibling            // next node (may be text)
el.previousSibling        // previous node (may be text)

// All descendants as array
[...el.querySelectorAll("*")]

// Contains
el.contains(otherEl)      // true if otherEl is el or a descendant
el.compareDocumentPosition(other) // bitmask: node relationship

// Create
const div = document.createElement("div");
const text = document.createTextNode("Hello");
const frag = document.createDocumentFragment(); // lightweight container, no reflow

// Set content before inserting (avoid repeated reflows)
div.textContent = "Hello";       // sets text (safe — no XSS)
div.innerHTML = "<b>Hello</b>";  // sets HTML (XSS risk with user data!)
div.className = "card active";
div.id = "main";

// Append / Prepend (modern — accepts strings and nodes)
parent.append(div);              // add at end
parent.prepend(div);             // add at start
parent.append("text", div, other); // multiple
el.before(newEl);                // insert before el
el.after(newEl);                 // insert after el

// Insert relative to element
el.insertAdjacentElement("beforebegin", newEl) // before el
el.insertAdjacentElement("afterbegin", newEl)  // first child of el
el.insertAdjacentElement("beforeend", newEl)   // last child of el
el.insertAdjacentElement("afterend", newEl)    // after el

el.insertAdjacentHTML("beforeend", "<li>Item</li>") // insert HTML
el.insertAdjacentText("afterend", "text")           // insert text

// Legacy
parent.appendChild(child)        // add at end — returns child
parent.insertBefore(newEl, refEl) // insert before refEl

// Clone
el.cloneNode(false)  // shallow — element only
el.cloneNode(true)   // deep — element + all descendants

el.remove()                     // remove el from DOM (modern)
parent.removeChild(el)          // legacy — requires parent reference

el.replaceWith(newEl)           // replace el with newEl (or string)
parent.replaceChild(newEl, oldEl) // legacy

el.innerHTML = ""               // remove all children (fast but loses event listeners)
el.replaceChildren()            // clear children (or pass new children)
while (el.firstChild) el.removeChild(el.firstChild); // safe clear

el.getAttribute("href")          // get attribute value (or null)
el.setAttribute("href", "/")     // set attribute
el.removeAttribute("disabled")   // remove attribute
el.hasAttribute("disabled")      // boolean check
el.toggleAttribute("disabled")   // toggle on/off
el.toggleAttribute("disabled", true)  // force on

// Data attributes
el.dataset.userId                // reads data-user-id attribute
el.dataset.userId = "123"        // sets data-user-id="123"
el.dataset.myKey = "val"         // sets data-my-key="val"
// <div data-user-id="1" data-my-key="val">

// Properties vs attributes
input.value       // property — current value
input.getAttribute("value") // attribute — initial/default value
input.checked     // boolean property
input.disabled    // boolean property

// classList — preferred
el.classList.add("active", "visible")
el.classList.remove("hidden")
el.classList.toggle("open")
el.classList.toggle("open", condition) // force on/off
el.classList.replace("old", "new")
el.classList.contains("active")   // boolean
el.classList.item(0)              // class at index
[...el.classList]                 // array of class names
el.className = "card active"      // overwrite all classes (string)

// Inline styles
el.style.color = "red"
el.style.backgroundColor = "blue"  // camelCase for hyphenated
el.style.cssText = "color: red; background: blue;"  // batch
el.style.setProperty("--my-var", "42px") // CSS custom property
el.style.getPropertyValue("--my-var")
el.style.removeProperty("color")

// Computed styles (after CSS applied)
const styles = window.getComputedStyle(el)
styles.getPropertyValue("color")  // "rgb(255, 0, 0)"
styles.fontSize                   // "16px"

// addEventListener(type, handler, options)
el.addEventListener("click", handler)
el.addEventListener("click", handler, { capture: true })
el.addEventListener("click", handler, { once: true })     // auto-removes after first call
el.addEventListener("click", handler, { passive: true })  // hints browser: no preventDefault
el.addEventListener("click", handler, { signal: controller.signal }) // abortable

el.removeEventListener("click", handler) // must pass same function reference

// Abort-based removal (ES2022)
const ac = new AbortController();
el.addEventListener("click", handler, { signal: ac.signal });
ac.abort(); // removes listener

el.addEventListener("click", (event) => {
  event.type            // "click"
  event.target          // element that triggered event
  event.currentTarget   // element listener is on
  event.bubbles         // true if event bubbles
  event.cancelable      // true if default can be prevented

  event.preventDefault()    // stop default behavior (form submit, link follow)
  event.stopPropagation()   // stop bubbling/capturing
  event.stopImmediatePropagation() // stop other listeners on same element too

  // Mouse events
  event.clientX / event.clientY   // viewport-relative
  event.pageX / event.pageY       // document-relative
  event.offsetX / event.offsetY   // element-relative
  event.button    // 0=left, 1=middle, 2=right
  event.buttons   // bitmask of pressed buttons
  event.altKey / event.ctrlKey / event.shiftKey / event.metaKey

  // Keyboard events
  event.key       // "Enter", "ArrowUp", "a", etc.
  event.code      // "KeyA", "ArrowUp", "Enter" (physical key)
  event.repeat    // true if key held down

  // Touch events
  event.touches        // list of all current touches
  event.changedTouches // touches that changed
});

// Mouse
"click"         // left click or Enter on focused
"dblclick"
"mousedown" / "mouseup"
"mousemove"
"mouseenter"    // does not bubble
"mouseleave"    // does not bubble
"mouseover"     // bubbles — fires on children too
"mouseout"      // bubbles
"contextmenu"   // right-click

// Keyboard
"keydown"       // fires repeatedly when held
"keyup"
"keypress"      // deprecated — use keydown

// Form
"submit"        // form submission
"change"        // input value committed (blur or Enter)
"input"         // any value change (fires on every keystroke)
"focus"         // element gains focus (does not bubble)
"blur"          // element loses focus (does not bubble)
"focusin"       // gains focus (bubbles)
"focusout"      // loses focus (bubbles)
"reset"

// Document / Window
"load"          // resource loaded (window, img, etc.)
"DOMContentLoaded"  // HTML parsed, no waiting for CSS/img
"resize"
"scroll"
"beforeunload"  // user leaving page — set event.returnValue for prompt
"unload"        // deprecated for most uses
"visibilitychange" // document.visibilityState changed
"online" / "offline"

// Pointer (unified mouse + touch + stylus)
"pointerdown" / "pointerup" / "pointermove"
"pointerenter" / "pointerleave"
"pointercancel"

// Drag
"dragstart" / "drag" / "dragend"
"dragenter" / "dragover" / "dragleave" / "drop"

// Clipboard
"cut" / "copy" / "paste"

// Custom
el.dispatchEvent(new Event("my-event"))
el.dispatchEvent(new CustomEvent("my-event", { detail: { foo: "bar" }, bubbles: true }))
el.addEventListener("my-event", e => console.log(e.detail));

// Attach one listener to parent instead of each child
document.querySelector("#list").addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (!item) return;
  console.log("Clicked:", item.dataset.id);
});
// Works for dynamically added children too

// Element size and position
const rect = el.getBoundingClientRect();
rect.top     // top from viewport
rect.left    // left from viewport
rect.width   // element width
rect.height  // element height
rect.right   // rect.left + rect.width
rect.bottom  // rect.top + rect.height

// Scroll
window.scrollY          // vertical scroll offset of window
window.scrollX          // horizontal scroll offset
el.scrollTop            // scroll offset within element
el.scrollLeft
el.scrollHeight         // total scrollable height
el.scrollWidth          // total scrollable width
el.clientHeight         // visible height (no scrollbar)
el.clientWidth          // visible width
el.offsetHeight         // height including border
el.offsetWidth
el.offsetTop            // top relative to offsetParent
el.offsetLeft

// Scroll actions
window.scrollTo({ top: 0, behavior: "smooth" })
el.scrollIntoView({ behavior: "smooth", block: "center" })
window.scrollBy({ top: 100, behavior: "smooth" })

// Safe template rendering
function renderItem(item) {
  const li = document.createElement("li");
  li.textContent = item.name;      // safe — no XSS
  li.dataset.id = item.id;
  li.classList.add("item");
  if (item.active) li.classList.add("active");
  return li;
}

// Batch DOM updates with DocumentFragment
const frag = document.createDocumentFragment();
items.forEach(item => frag.appendChild(renderItem(item)));
list.appendChild(frag); // single reflow

// IntersectionObserver — lazy load / scroll spy
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add("visible");
      observer.unobserve(entry.target); // once only
    }
  });
}, { threshold: 0.1 });

document.querySelectorAll(".lazy").forEach(el => observer.observe(el));

// MutationObserver — watch DOM changes
const mo = new MutationObserver((mutations) => {
  mutations.forEach(m => console.log(m.type, m.addedNodes, m.removedNodes));
});
mo.observe(el, { childList: true, subtree: true, attributes: true });
mo.disconnect();

// ResizeObserver — element size changes
const ro = new ResizeObserver(entries => {
  entries.forEach(e => console.log(e.contentRect.width));
});
ro.observe(el);
ro.disconnect();

const form = document.querySelector("form");
const input = document.querySelector("input[name='email']");

// Values
input.value               // current value
input.defaultValue        // initial HTML value
input.checked             // checkbox/radio
input.files               // FileList for file inputs
new FormData(form)        // all form fields as FormData

// Validation
input.validity.valid      // boolean
input.validity.valueMissing
input.validity.typeMismatch
input.validity.patternMismatch
input.checkValidity()     // boolean
input.reportValidity()    // boolean + shows native UI
input.setCustomValidity("Error message") // "" to clear

form.addEventListener("submit", e => {
  e.preventDefault();
  const data = Object.fromEntries(new FormData(form));
  console.log(data);
});