DOM manipulation

// HTMLElement
const nav = document.querySelector("nav");
// children
const links = nav?.querySelectorAll(":scope > a");
// HTMLLIElement
const first = document.querySelector("li");
// HTMLElement
const byId = document.getElementById("app");
 
// ids starting with a digit or holding odd chars
// need escaping
const id = "1st-item";
const el = document.querySelector(`#${CSS.escape(id)}`);

function* ancestors(el: Element): Generator<Element> {
  for (let p = el.parentElement; p; p = p.parentElement) {
    yield p;
  }
}
 
const cell = document.querySelector("td");
// HTMLTableRowElement
const row = cell?.closest("tr");
const next = row?.nextElementSibling;     // Element | null

const li = document.createElement("li");   // HTMLLIElement
li.className = "item";
li.append("Buy ", Object.assign(
  document.createElement("strong"), { textContent: "milk" },
));
document.querySelector("ul")?.append(li);

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  existing content
  <!-- beforeend -->
</p>
<!-- afterend -->

<template id="row-tpl">
  <li class="row"><span class="name"></span></li>
</template>

type User = { id: string; name: string };
 
function renderUsers(
  list: Element,
  tpl: HTMLTemplateElement,
  users: readonly User[],
): void {
  const frag = document.createDocumentFragment();
  for (const u of users) {
    // importNode is generic: returns DocumentFragment
    const row = document.importNode(tpl.content, true);
    row.querySelector(".name")!.textContent = u.name;
    row.firstElementChild?.setAttribute("data-id", u.id);
    frag.append(row);
  }
  list.replaceChildren(frag); // clear + insert once
}
 
const tpl = document.querySelector<HTMLTemplateElement>(
  "#row-tpl",
);
const list = document.querySelector("ul");
if (tpl && list) {
  renderUsers(list, tpl, [{ id: "1", name: "Ada" }]);
}

const out = document.querySelector("output");
declare const userInput: string;
 
if (out) {
  out.textContent = userInput;         // ✅ always text
  // out.innerHTML = userInput;        // ❌ XSS
}

type SetHTML = (html: string) => void;
 
function safeSet(el: Element, html: string): void {
  const setHTML = (el as Element & { setHTML?: SetHTML })
    .setHTML;
  if (typeof setHTML === "function") {
    setHTML.call(el, html);
  } else {
    el.textContent = html; // or DOMPurify.sanitize
  }
}

const input = document.querySelector("input");
if (input) {
  input.value = "typed";                 // current value
  input.getAttribute("value");           // still the initial
  input.toggleAttribute("disabled", true);
  input.disabled;                        // true
}

const card = document.querySelector<HTMLElement>(".card");
if (card) {
  const id: string | undefined = card.dataset.userId;
  card.dataset.state = "open";   // sets data-state="open"
  card.dataset.count = String(3); // strings only
  delete card.dataset.state;     // removes the attribute
}

const panel = document.querySelector<HTMLElement>(".panel");
if (panel) {
  const open = panel.classList.toggle("open");
  panel.classList.toggle("dim", !open);
 
  panel.style.transform = "translateX(0)"; // camelCase
  panel.style.setProperty("--gap", "8px"); // custom prop
  panel.style.setProperty("color", "red", "important");
  panel.style.removeProperty("color");
 
  const cs = getComputedStyle(panel);
  const gap = cs.getPropertyValue("--gap").trim();
  const width = parseFloat(cs.width); // "320px" to 320
}

const box = document.querySelector("#box");
if (box) {
  const r = box.getBoundingClientRect();
  const pageTop = r.top + window.scrollY;
  const inView = r.bottom > 0 && r.top < innerHeight;
 
  box.scrollIntoView({
    behavior: "smooth",   // "auto" | "instant" | "smooth"
    // "start" (default) | "nearest" | …
    block: "center",
    inline: "nearest",
  });
 
  window.scrollTo({ top: 0, behavior: "smooth" });
  window.scrollBy({ top: 200 });
}
 
const scroller = document.querySelector(".log");
if (scroller) {
  // stick to bottom
  scroller.scrollTop = scroller.scrollHeight;
  const atEnd =
    scroller.scrollHeight - scroller.scrollTop
      - scroller.clientHeight < 1;
}

const onVisible: IntersectionObserverCallback = (
  entries, observer,
) => {
  for (const e of entries) {
    if (!e.isIntersecting) continue;
    const img = e.target as HTMLImageElement;
    img.src = img.dataset.src ?? "";
    observer.unobserve(img); // load once
  }
};
 
const io = new IntersectionObserver(onVisible, {
  root: null,              // viewport
  rootMargin: "200px 0px", // start early
  threshold: [0, 0.5, 1],  // ratios that fire callbacks
});
document.querySelectorAll("img[data-src]")
  .forEach((img) => io.observe(img));

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const [box] = entry.contentBoxSize; // inline = width
    const el = entry.target as HTMLElement;
    el.classList.toggle("narrow", box.inlineSize < 480);
  }
});
const card = document.querySelector(".card");
if (card) ro.observe(card, { box: "border-box" });

const mo = new MutationObserver((records) => {
  for (const r of records) {
    if (r.type === "childList") {
      r.addedNodes.forEach((n) => {
        if (n instanceof HTMLElement) n.classList.add("new");
      });
    } else if (r.type === "attributes") {
      console.info(r.attributeName, r.oldValue);
    }
  }
});
 
mo.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ["class", "data-state"],
  attributeOldValue: true,
});
const pending = mo.takeRecords(); // flush before disconnect
mo.disconnect();

// 1. `as` / generic: trusts you, no runtime check
const a = document.querySelector(
  "#email",
) as HTMLInputElement;
const b = document.querySelector<HTMLInputElement>("#email");
 
// 2. instanceof: checks at runtime, narrows
const c = document.querySelector("#email");
if (c instanceof HTMLInputElement) {
  c.value = "x"; // HTMLInputElement
}
 
// 3. helper that checks and throws
function $<T extends Element>(
  sel: string,
  type: new () => T,
  root: ParentNode = document,
): T {
  const el = root.querySelector(sel);
  if (!(el instanceof type)) {
    throw new Error(`${sel} is not a ${type.name}`);
  }
  return el;
}
const email = $("#email", HTMLInputElement);

class UserCard extends HTMLElement {
  static observedAttributes = ["name"];
  attributeChangedCallback(
    _n: string, _old: string | null, next: string | null,
  ): void {
    this.textContent = next ?? "";
  }
}
customElements.define("user-card", UserCard);
 
declare global {
  interface HTMLElementTagNameMap {
    "user-card": UserCard;
  }
}
 
const card = document.querySelector("user-card"); // UserCard

{
  "compilerOptions": {
    "lib": ["ES2024", "DOM", "DOM.Iterable"],
    "strict": true
  }
}

const items = [...document.querySelectorAll<HTMLElement>(
  ".item",
)];
 
// ❌ thrashing: read, write, read, write…
for (const el of items) {
  el.style.height = `${el.offsetWidth / 2}px`;
}
 
// ✅ batch reads, then writes in the next frame
const widths = items.map((el) => el.offsetWidth);
requestAnimationFrame(() => {
  items.forEach((el, i) => {
    el.style.height = `${widths[i] / 2}px`;
  });
});

.comment {
  content-visibility: auto;
  /* placeholder height */
  contain-intrinsic-size: auto 200px;
}