# Dom Hierarchy

> Use when working with DOM APIs. Use when typing element references. Use when creating DOM utilities. Use when handling events. Use when manipulating the DOM.

- Skill: `marius-townhouse/dom-hierarchy` (Agent Skill)
- Install (CLI): `npx skillmds@latest add marius-townhouse/dom-hierarchy`
- Raw SKILL.md: https://api.skillmd.com/api/skills/marius-townhouse/dom-hierarchy/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: marius-townhouse (https://skillmd.com/u/marius-townhouse)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/marius-townhouse/dom-hierarchy

---


# Understand the DOM Hierarchy

## Overview

TypeScript's DOM types accurately model the browser's DOM hierarchy. Understanding this hierarchy - Element extends Node, HTMLElement extends Element, etc. - helps you write correct DOM code. Use the most specific type possible for better autocompletion and type safety.

## When to Use This Skill

- Working with DOM APIs
- Typing element references
- Creating DOM utilities
- Handling DOM events
- Manipulating the DOM

## The Iron Rule

**Use the most specific DOM type possible. HTMLElement for HTML elements, HTMLInputElement for inputs, etc.**

## DOM Type Hierarchy

```
EventTarget
  └── Node
       └── Element
            └── HTMLElement
            │    └── HTMLInputElement
            │    └── HTMLButtonElement
            │    └── etc.
            └── SVGElement
```

## Example

```typescript
// BAD: Too general
const el: Element = document.getElementById('input');
el.value; // Error: Property 'value' doesn't exist on Element

// GOOD: Specific type
const input = document.getElementById('input') as HTMLInputElement;
input.value; // OK - value exists on HTMLInputElement

// Even better: Use querySelector with type parameter
const button = document.querySelector<HTMLButtonElement>('button.submit');
button?.disabled; // Typed correctly
```

## Reference

- Effective TypeScript, 2nd Edition by Dan Vanderkam
- Item 75: Understand the DOM Hierarchy