DOM

The DOM is one of those things you use every day as a frontend developer without ever quite stopping to think about what it actually is. You call document.querySelector, you add event listeners, you update innerHTML — and it all just works. But when something breaks, or you need to reason about performance, you discover that the DOM has a lot of rules running underneath everything you do.

What Is the DOM?

When a browser parses an HTML document it does not store it as a string. Instead it builds a live tree of objects in memory — the Document Object Model. Every element, every text node, every comment becomes a node in that tree, and JavaScript can read and modify that tree at any time.

The critical word is live. Change the tree from JavaScript and the browser re-renders the affected parts of the page immediately.

Node Types

Not everything in the DOM is an element. Every node has a nodeType integer:

document.nodeType          // 9 — the document itself
document.body.nodeType     // 1 — an element

children gives you only element nodes (nodeType 1). childNodes gives you everything — elements, text, comments. Most of the time children is what you want.

Selecting Elements

const el = document.querySelector('.card')
const all = document.querySelectorAll('article h2')

Both accept any valid CSS selector. querySelectorAll returns a static NodeList — a snapshot taken at call time.

Event Propagation

When you click a button inside a div, the browser sends the event on a journey through the entire tree. Understanding this journey explains a huge class of bugs and makes event delegation possible.

Because events bubble, you can attach one listener to a parent and check event.target to know which child was acted on — event delegation.

A Mental Model for the DOM

When the browser behaves unexpectedly, the first question is usually: which node owns this behaviour, and what does the DOM's model say should happen here?