JavaScript: The Definitive Guide, 6th Edition

Document Structure and Traversal

Once you have selected an Element from a Document, you sometimes need to find structurally related portions (parent, siblings, children) of the document. A Document can be conceptualized as a tree of Node objects, as illustrated in Figure 15-1. The Node type defines properties for traversing such a tree, which we’ll cover in Documents As Trees of Nodes. Another API allows documents to be traversed as trees of Element objects. Documents As Trees of Elements covers this newer (and often easier-to-use) API.

Documents As Trees of Nodes

The Document object, its Element objects, and the Text objects that represent runs of text in the document are all Node objects. Node defines the following important properties:

parentNode

The Node that is the parent of this one, or null for nodes like the Document object that have no parent.

childNodes

A read-only array-like object (a NodeList) that is a live representation of a Node’s child nodes.

firstChild, lastChild

The first and last child nodes of a node, or null if the node has no children.

nextSibling, previousSibling

The next and previous sibling node of a node. Two nodes with the same parent are siblings. Their order reflects the order in which they appear in the document. These properties connect nodes in a doubly linked list.

nodeType

The kind of node this is. Document nodes have the value 9. Element nodes have the value 1. Text nodes have the value 3. Comments nodes are 8 and DocumentFragment nodes are 11.

nodeValue