mcpField
D
dom-hierarchy

dom-hierarchy

github.com/marius-townhouseDevelopment644 installsUpdated 38w ago
Repository

About dom-hierarchy

A TypeScript skill for developers working with browser DOM APIs. It explains the DOM type hierarchy and recommends using the most specific type for safer, clearer code.

Key features

  1. 01DOM type hierarchy guidance
  2. 02Specific types for element references
  3. 03DOM event and utility typing

Use cases

  1. 01Typing HTML input and button elements
  2. 02Building DOM utilities
  3. 03Handling DOM events

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/marius-townhouse/effective-typescript-skills --skill dom-hierarchy

After installing, type/dom-hierarchyin Claude Code to confirm it loaded.

Details

From the project README

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

// 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

Comments

Markdown supported