childNodes (W3C DOM Core property)

Example

var kids = node.childNodes;

In the example above, kids will be a collection of all the direct child nodes of node. If node has no child nodes then kids will be an empty collection (with zero length). The returned collection is live, which means that changes to the HTML it represents are immediately reflected in the collection, without having to retrieve it again.

So if we say that node is actually an HTML ul element, like this:

<ul>
  <li>Mostly set in 1955 <em>(Part 1)</em></li>
  <li>Mostly set in 2015 <em>(Part 2)</em></li>
  <li>Mostly set in 1885 <em>(Part 3)</em></li>
</ul>

Each of those li elements is a child node of the ul, and will be included in its childNodes collection, numbered 0 to 2. The em elements will not be in that collection, because they’re not direct child nodes of the list (they are descendents, not children).

Note: This example doesn’t take account of whitespace

Actually this example is idealized, and in some browsers there may in fact be additional nodes in the childNodes collection; that’s because some browsers count intermediate whitespace as text nodes, and would therefore consider each piece of whitespace between the structural nodes to be a text node.

For more about this behavior please see DOM Core.

Description

The childNodes collection is an ordered list of all the direct child nodes of this node; if there are no child nodes then this collection is empty (it has zero length). The childNodes collection is a NodeList, in which the items are indexed numerically, and appear in source order.

As with all node lists, childNodes is a live collection, which means that changes to the collection it represents are immediately reflected in the node list (as opposed to it being a static snapshot).

Attributes of an element are not considered child nodes, and therefore don’t appear in the childNodes collection2

This collection is read only.

A collection is not an array

Even though a collection looks like an array, it isn’t an array — although you can iterate through it and refer to its members like an array, you can’t use Array methods like push or pop on it.

Frequently Asked Questions (FAQs) about ChildNodes W3C DOM Core Property

What is the ChildNodes W3C DOM Core Property?

The ChildNodes W3C DOM Core Property is a property in JavaScript that returns a NodeList object containing all child nodes of the specified node, as a NodeList object. The NodeList object represents a collection of nodes. The nodes in the NodeList are sorted as they appear in the source code and can be accessed by index numbers starting from 0.

How does ChildNodes differ from Children in JavaScript?

While both ChildNodes and Children are used to access child nodes of a particular node, they have a key difference. ChildNodes returns a NodeList containing all child nodes, including text and comment nodes, while Children only returns element nodes. This means that ChildNodes can sometimes return more nodes than Children.

How can I access a specific child node using ChildNodes?

You can access a specific child node by using its index number. For example, if you want to access the first child node of an element, you can use element.childNodes[0]. Remember, the index numbers start from 0, so the first child node is at index 0, the second at index 1, and so on.

Can I use ChildNodes to access child nodes in HTML collections?

Yes, you can use ChildNodes to access child nodes in HTML collections. An HTML collection is a type of NodeList, and ChildNodes can be used to access the child nodes of any node, including those in an HTML collection.

What happens if I use ChildNodes on a node with no children?

If you use ChildNodes on a node with no children, it will return an empty NodeList. This means that the length property of the NodeList will be 0, and trying to access a child node by index will return undefined.

Can I modify the child nodes of a node using ChildNodes?

While you can’t directly modify child nodes using ChildNodes, you can use it to access child nodes and then modify them using other DOM methods. For example, you can use ChildNodes to get a reference to a child node, and then use the nodeValue property to change its content.

Is ChildNodes supported in all browsers?

Yes, ChildNodes is a part of the W3C DOM standard and is supported in all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it may not be supported in older browsers or non-standard compliant browsers.

Can I use ChildNodes to access child nodes in XML documents?

Yes, ChildNodes can be used to access child nodes in XML documents. The W3C DOM standard, which includes ChildNodes, is designed to work with both HTML and XML documents.

How does ChildNodes handle whitespace in HTML documents?

In HTML documents, whitespace between elements is treated as text nodes. This means that ChildNodes will include these whitespace text nodes when it returns the child nodes of an element. If you want to ignore whitespace, you can use the Children property instead.

Can I use ChildNodes to access the child nodes of a text node?

No, text nodes do not have child nodes, so using ChildNodes on a text node will return an empty NodeList. If you want to access the content of a text node, you can use the nodeValue property.