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

How come 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

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents