Every DOM class earns its spot by adding one capability.
The hierarchy is not bureaucracy — each level is a job description.
EventTarget can listen. Node can sit in a tree.
Element has attributes and matches selectors. HTMLElement
has style, dataset, and focus. And each tag class like
HTMLButtonElement adds its tag-specific members. The tree below was not
written by hand: the script walked every constructor your browser exposes on
window and connected them by their real prototype links.
The capability ladder for one button
What each ancestor contributes to document.createElement("button"):
Discovered live from window
Scanning…
Class details
Click a class in the tree.
Why this design matters
Write once, share everywhere
appendChild is defined a single time on Node.prototype, yet
every element, text node, comment, and the document itself can use it. Prototypes are
how the platform avoids copying thousands of methods onto every node.
One object answers to many names
A button is simultaneously an HTMLButtonElement, an
HTMLElement, an Element, a Node, and an
EventTarget. APIs are written against the most general level that works
— addEventListener does not care what kind of thing is listening.