Open the explorer

A guided path

How browser objects fit together

Every object in the browser lives in two graphs at once.

A button on this page is one object, but it participates in several relationship systems. Its prototype chain tells it how to behave — that is where addEventListener and appendChild actually live. Its tree links tell it where it sits in the document — who its parent, children, and siblings are. And everything hangs off window, the global object. These lessons take each system apart using the live objects in your browser, not screenshots.

The three relationship systems

1. Prototype links — behavior

Every object has a hidden link to a backup object, its prototype. A button does not own addEventListener; it inherits it through a chain of prototypes. 

button
  → HTMLButtonElement.prototype
  → HTMLElement.prototype
  → Element.prototype
  → Node.prototype
  → EventTarget.prototype
  → Object.prototype
  → null

2. Tree links — structure

DOM nodes point at each other to form the document tree. These links are per-node and change when the page changes. They are completely separate from prototype links. 

button.parentNode
button.children
button.nextSibling
button.ownerDocument
document.documentElement

3. The window graph — the world

window is the global object. It owns document, all the constructors (Node, HTMLElement…), and the BOM objects. Many links are circular on purpose. 

window.document === document
document.defaultView === window
window.window === window

Measured live from your browser, right now

These numbers come from running code against this page as it loaded.

The path

Each lesson is interactive and inspects real objects. Take them in order.

1

Property lookup and the chain

What happens when you write button.appendChild? Watch the browser walk the prototype chain step by step.

2

prototype, __proto__, constructor

The three most-confused words in JavaScript, untangled with a live object-graph diagram for functions, classes, DOM elements, and literals.

3

The DOM class family tree

EventTarget → Node → Element → HTMLElement → dozens of tag classes. The whole hierarchy, discovered live from your browser's own constructors.

4

How DOM nodes link together

parentNode, siblings, childNodes vs children, and the surprise whitespace text nodes. Click any node and see every live link it holds.

5

window and the browser object model

The global object: how var lands on it, why so many references are circular, and what window's own prototype chain looks like.

6

JavaScript prototype lab

Experiment with Arrays, functions, constructors, DOM nodes, and browser objects. Change a chain, trace property lookup, and inspect every inherited member live.

⚙

Advanced explorer

The free-roam tool: pick any live object, inspect its full chain, every member with descriptors, and compare two objects' prototypes.