What is the DOM?

The DOM is the browser's in-memory representation of a page: a tree of objects that JavaScript can read and change, with the rendered page updating to match.

HTML is text. When the browser parses it, it builds this tree:

document
└── html
    ├── head
    │   └── title  └── "My page"
    └── body
        ├── h1  └── "Hello"
        └── ul
            ├── li
            └── li

Every part becomes a node: elements, text, comments, even whitespace between tags. Element nodes are the ones you usually work with.

Navigating it

el.parentElement;
el.children;              // elements only
el.childNodes;            // includes text and comment nodes
el.nextElementSibling;
el.closest(".card");      // nearest matching ancestor

Note the children / childNodes distinction — the second includes whitespace text nodes, which surprises people counting children.

It is not your HTML file

The DOM is built from the HTML, then diverges. JavaScript can add and remove nodes, and the browser repairs invalid markup while parsing. "View source" shows the original text; the Elements panel shows the live DOM. When they differ, something changed it after load.

The DOM is an API, not JavaScript

It is defined by the WHATWG and implemented by the browser. That is why DOM methods feel different from the language — querySelectorAll returns a NodeList rather than an array, and HTMLCollection is live while a NodeList is static.

Why it matters for performance

Each change can invalidate layout. Reading a geometric property forces the browser to recompute pending work, so interleaving reads and writes in a loop is slow. Batch reads, then writes — and this is the cost that virtual DOM libraries exist to manage, by computing changes in plain objects first and touching the real DOM once.