Node.childNodes

The Node.childNodes read-only property returns a live collection of child nodes of the given element.

Syntax

var ndList = elementNodeReference.childNodes; 

ndList is an ordered collection of node objects that are children of the current element. If the element has no children, then ndList contains no node.

The ndList is a variable storing the node list of childNodes. Such list is of type NodeList.

Example

// parg is an object reference to a <p> element

if (parg.hasChildNodes()) {
  // So, first we check if the object is not empty, if the object has child nodes
  var children = parg.childNodes;

  for (var i = 0; i < children.length; i++) {
    // do something with each child as children[i]
    // NOTE: List is live, Adding or removing children will change the list
  }
}

// This is one way to remove all children from a node
// box is an object reference to an element with children

while (box.firstChild) {
    //The list is LIVE so it will re-index each call
    box.removeChild(box.firstChild);
}

Notes

The items in the collection of nodes are objects and not strings. To get data from those node objects, you must use their properties (e.g. elementNodeReference.childNodes[1].nodeName to get the name, etc.).

The document object itself has 2 children: the Doctype declaration and the root element, typically referred to as documentElement. (In (X)HTML documents this is the HTML element.)

childNodes also includes e.g. text nodes and comments. To skip them, use ParentNode.children instead.

Specification

• W3C DOM 2 Core: childNodes
• W3C DOM 3 Core: childNodes
• W3C DOM 3 NodeList interface

See also

• Node.firstChild
• Node.lastChild
• Node.nextSibling
• Node.previousSibling
• ParentNode.children