HTML DOM childNodes property

childNodesThe read-only property returns the collection of child nodes of the given element, with the index of the first child node as 0.

Nodes in the collection are sorted in the order they appear in the source code, and they can be accessed by index.

Use the length property to determine the number of child nodes, and then you can iterate over all child nodes and extract the required information.

Whitespace within elements is considered text, and text is considered a node. Comments are also considered nodes.

To get a collection of only elements (excluding text and comment nodes), please usechildrenProperty.

nodeIf .childNodes[0] produces the same result thenfirstChildProperty.

Syntax:

node.childNodes

Example

var list = document.body.childNodes;

All browsers fully support the childNodes property:

property
childNodes	Yes	Yes	Yes	Yes	Yes

Return Value:	A NodeList object representing a collection of nodes
DOM Version:	DOM Level1

Find out how many child nodes the DIV element has:

Example

var len = document.querySelector("div").childNodes.length;

Change the second child node of the DIV element (index1）Background Color:

Example

var nodes = document.querySelector("div").childNodes;
nodes[1nodes[.style.backgroundColor = "coral";]