DOM tree

A DOM tree is an ordered parent-child structure of DOM nodes in the Document Object Model. Children have an order, each node has at most one parent in a tree, and following parent relationships cannot form a cycle. A document tree is rooted at a document node; its document element is a different node within that structure.^[ref]

In <p>Hello <em>world</em>.</p>, the paragraph has three children: a text node containing Hello and a following space, the emphasis element, and a text node containing the period. The emphasis element has its own text child containing world. The word world is therefore a descendant of the paragraph, but not its direct child.

That distinction explains selector behavior. A child CSS combinator tests an immediate relationship, while a descendant combinator can follow multiple parent-child steps. Inspecting only element children also gives a different list from inspecting every child node, because DOM text nodes and DOM comment nodes are nodes too.

The DOM tree describes document structure rather than the exact source spelling or the boxes painted on screen. HTML parsing can create structure from omitted tags, and CSS can change rendering without inserting a document child. Attribute data is attached to elements under its specified model; it is not simply another ordinary child in the document's child list.^[ref]