The Interface Hierarchy

DOM objects are organized as a class hierarchy, and in JavaScript it is a real prototype chain. An <input> object gets value from HTMLInputElement, hidden and focus() from HTMLElement, classList and querySelector() from Element, textContent and appendChild() from Node, and addEventListener() from EventTarget. Each method lives once on its prototype and is shared by every instance.

The DOM interface hierarchy: every node is an EventTarget, but not every EventTarget is a node

Node is abstract: every node is a Document, Element, Text, Comment or other subclass, identified by nodeType (1 for elements, 3 for text, 9 for the document). EventTarget is wider than the tree: Window, AbortSignal and even a plain new EventTarget() accept listeners. The listing below prints real prototype chains from Chrome 1 .

Walking an object's prototype chainJavaScript

const chain = (obj) => {
  const p = Object.getPrototypeOf(obj);
  return p ? [p.constructor.name, ...chain(p)] : [];
};
console.log(chain(document.createElement('input')).join(' > '));
console.log(chain(document.createTextNode('hi')).join(' > '));
console.log(chain(document).join(' > '));
console.log(chain(document.createElement('div').attachShadow({ mode: 'open' })).join(' > '));

Output

HTMLInputElement > HTMLElement > Element > Node > EventTarget > Object
Text > CharacterData > Node > EventTarget > Object
HTMLDocument > Document > Node > EventTarget > Object
ShadowRoot > DocumentFragment > Node > EventTarget > Object

MENU