= DOM tree
{c}
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.<DOM Standard by WHATWG>[Infrastructure, Trees; Nodes, node trees and document trees]{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.<DOM Standard by WHATWG>[Node tree constraints and Element attributes]{ref}
Back to article page
