An APIs series

The DOM

Every tag you type becomes an object you can script. That is the whole idea: the Document Object Model is a bidirectional map between markup and a live tree of objects, so anything you can write in HTML and CSS by hand, you can read and rewrite with code. Frameworks wrap it, rename it, and diff against it — but underneath, every one of them ends up calling the methods in this series.

The thesis

The tree is the key. The browser parses your markup into a tree of nodes — elements, text, even the whitespace between tags — and hands you an API over it. Nearly everything you will ever do with that API is one move, repeated:

Select the node(s) of interest, manipulate them — add, edit, delete — and repeat, until the page is in its new state.

So the series is ordered by that move. First the tree itself, then selection, then walking, then each kind of manipulation in turn — attributes, content, creation, destruction — then the measurement APIs, and finally an honest look at the libraries built on top, and what they do and do not buy you.

Who this is for

Students who can read and write HTML and CSS by hand, and who have the Events series behind them — nearly every demo here is driven by a button press or a form field. For the conceptual grounding on what the browser does with your markup before your script ever runs, see the browser series.

How the demos work

Every demo runs in its own frame as a real, complete HTML file you can open on its own and edit. Each is a small lab: sample markup on the left of your attention, buttons that run one API call at a time, and a log panel showing what came back. Several steps close with an applied mini-demo — a spoiler toggle, a roster builder, a self-truncating paragraph — where the same calls earn their keep on a real problem. Nothing is bundled; view source is the second half of every demo.

The nine steps

  1. 01Hello, DOM

    The parse tree the browser hands you: nodes, node types, and the whitespace text nodes that surprise everyone once.

  2. 02Selection

    getElementById through querySelectorAll: CSS selectors as the query language, live collections versus static lists, and scoped selection. With a selector playground.

  3. 03Walking the tree

    Node relationships — parent, child, sibling — the node versus element flavors of each, and when walking beats querying.

  4. 04Attributes and mappings

    getAttribute versus the mapped property, the renamed reserved words (className, htmlFor), classList, and data-* with dataset.

  5. 05Modification

    Changing what is already there: textContent, innerHTML and its hazards, and style changes done right — flip a class, not a property.

  6. 06Creation

    createElement and text nodes the long way, then the shortcuts: fragments, cloneNode, <template>, and insertAdjacentHTML.

  7. 07Destruction

    remove(), removeChild, replaceWith, emptying containers, and why deletion loops run bottom-up.

  8. 08Geometry and observers

    Where things are and how big: rects, offsets, scroll positions — and IntersectionObserver, which answers “is it visible?” without you polling for it.

  9. 09Beyond the raw DOM

    jQuery, virtual DOM, and the framework question. The DOM is the performance floor everything else stands on — what the abstractions actually buy, and what they cost.