The DOM's Inheritance Chain: EventTarget > Node > Element
Every HTML element is a stack of types: an EventTarget for events, a Node for tree structure, and an Element for common attributes. This lets you write type-safe DOM code, knowing a `div` has properties from all its ancestors.
Think of DOM elements as an inheritance chain: EventTarget → Node → Element → HTMLElement. An element is an EventTarget, so it can have listeners. It's a Node, so it lives in the DOM tree. It's an Element, so it has attributes. Finally, it's a specific HTMLElement like HTMLInputElement. This matters in TypeScript, where `querySelector` returns specific types, giving you access to all inherited methods. The footgun is getting type errors when trying to access, for example, an input's `.value` on a generic `Element`.
Read the original → developer.mozilla.org
- #dom
- #typescript
- #web-apis
- #inheritance
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.