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.
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.
To query an element in a NodeList, use the  operator.
document.childNodes.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 <head> document.documentElement.childNodes <body>
Any child has access to its parent through the parentNode property.
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;
Get children of the body element.
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.
Use hasChildNodes() to find out if a node has any children, .