Typing DOM Elements

Once you have an element reference, you need to access its properties. This is where type narrowing becomes essential. Let's walk through the safe patterns:

Step 1: Null Check

const input =
  document.getElementById("name");
// Type: HTMLElement | null

if (!input) {
  // Handle missing element
  console.warn("Input not found");
  return;
}
// After null check: input is
// narrowed to HTMLElement

Step 2: instanceof Check for Specific Type

if (input instanceof HTMLInputElement) {
  // input is now HTMLInputElement!
  // .value, .type, .checked, .placeholder
  // are all available!
  console.log(input.value);
  input.value = "Hello";

  // TypeScript blocks this:
  // input.src — only HTMLImageElement has .src
}

Alternative: Type Assertion (use sparingly!)

// When you're SURE of the type
const input =
  document.getElementById("name") as HTMLInputElement;
// ⚠️ No null check, no instanceof!
// Use only when you have certainty
// from external knowledge

// Slightly safer with null check:
const el =
  document.getElementById("name");
const input =
  el as HTMLInputElement | null;
if (input) {
  // Still assumes it's HTMLInputElement
  input.value;
}

Working with Multiple Elements:

const buttons =
  document.querySelectorAll("button");
// Type: NodeListOf<HTMLButtonElement>
// querySelectorAll with tag name
// gives SPECIFIC type!

buttons.forEach(btn => {
  // btn is HTMLButtonElement
  btn.disabled = true;
});

// With class selector, you lose specificity:
const els =
  document.querySelectorAll(".btn");
// Type: NodeListOf<Element>
// Must narrow each one:
els.forEach(el => {
  if (el instanceof HTMLButtonElement) {
    el.disabled = true;
  }
});

The safest and most idiomatic pattern: check for null with an early return, then narrow with instanceof to access specific properties. This pattern handles both the "element doesn't exist" case and the "wrong element type" case, giving you full type safety with zero runtime risk.