The DOM structures an HTML document like a genealogical tree: each document element has a single parent and the possibility of descendants. Here's the structure for the first part of this page:

DOM Tree graphic

DOCUMENT is the ancestor of all elements in the tree. Its child, HTML, has 2 children, HEAD and BODY. These siblings are the children of HTML because they occur between the opening and closing HTML tags. This principle organizes the entire tree — anything an element contains is treated as its descendant.

To flesh out the implications of this, compare the diagram of P above with the markup for this page's 1st paragraph:

<p>The <b>DOM</b> structures an HTML document like a genealogical <a href="#">tree</a>: each document element has … </p>

P's 1st child is a text node containing "The ". Its 2nd child is not the word "DOM," but the element node, B. As DOM: About Objects describes, a browser creates an object for every element in a document. So B is a full-blown object, too. This makes B's child, "DOM", a grandchild of P (even though it's displayed in-line with P's text).

The rest of the paragraph works the same way. P's 3rd child is more text, its 4th the element A, and its 5th the remaining text. The 2 sentences you see at the top of this page are built from P's 5 children (and their descendants).

When the browser builds the document tree from your HTML markup, it busily catalogs the relations between all the objects it creates from your HTML tags. In fact, it embeds these relationships into the objects themselves, as part of their properties.

Here are the relationship properties the first P element contains:

parentNode  (refers to BODY)
previousSibling  (refers to H1)
nextSibling  (refers to paragraph 2, which contains the diagram above)
firstChild  (the text node "The")
lastChild  (the last text node, which starts with "each...")
childNodes[0..n]  (childNodes[0] = firstChild,  childNodes[1] refers to B,  etc. 

(If P had only 1 child, "firstChild," "lastChild," and "childNodes[0]" would be synonyms.)

Well. Good for the browser, you might think. And you'd be right, if the browser kept all this information to itself. But it doesn't. It treats a document as a set of related objects and interfaces — it gives you access to all these properties.

To use them, you must find them.