Child Nodes

childNodes descending

ChildNodes

Like any of the 12 node types, Document, Element, and Text nodes have a childNodes member containing a NodeList, which is an arraylike object. childNodes is that it contains any child nodes, which is the direct descendants, of a parent node.

Note

For Text nodes, childNodes will always be empty and therefore have a length of 0. And also childNodes will never contain null. The childNodes will always contain a NodeList object, even if the parent node is childless.

A document can have two children.

document.childNodes;
// [DocumentType, html]

First, a DocumentType node for

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Second, an Element node representing our <html> element. Note that, for document, childNodes may contain only one Element node and one DocumentType node. Note too that document has a member named documentElement that refers to the one Element child node that it is permitted by DOM.

For web pages, documentElement will always refer to the <html> Element node.

childNodes

To query an element in a NodeList, use the [] operator.

document.childNodes[1].nodeName;

// "HTML"

Another way to query a NodeList element is with NodeList.item().

document.childNodes.item(1).nodeType;

// 1

document has a few shortcut members referring to <body>, <html>, and window. Those are named body, documentElement, and defaultView, respectively.

document.body.nodeName;
// "BODY"

document.documentElement.nodeName;
// "HTML"

var yogurt = "Brown Cow";
document.defaultView.yogurt;
// "Brown Cow"

window.yogurt;
// "Brown Cow"

yogurt = "Stonyfield";
document.defaultView.yogurt;
// "Stonyfield"

The HTML element has two children—the head and the body elements. You can access them using the childNodes array-like collection.

document.documentElement.childNodes.length
2

document.documentElement.childNodes[0]
<head>

document.documentElement.childNodes[1]
<body>

Any child has access to its parent through the parentNode property.

document.documentElement.childNodes[1].parentNode

<html>

For the below example, get the child nodes.

<body>
    <p class="opener">first paragraph</p>
    <p><em>second</em> paragraph</p>
    <p id="closer">final</p>
    <!-- and that's about it -->
</body>

Assign a reference to body to a variable

var bd = document.documentElement.childNodes[1];

Get children of the body element.

bd.childNodes.length

9

The body has 9 children. 3 paragraphs plus one comment makes 4 nodes. The white space between these 4 nodes makes 3 more text nodes. This makes a total of 7 so far. The white space between body and the first p is the eighth node. The white space between the comment and the closing </body> is another text node. This makes a total of 9 child nodes.

hasChildNodes()

Use hasChildNodes() to find out if a node has any children, .

document.documentElement.hasChildNodes()

true