HTML DOM children property

HTML DOM Element Object

childrenThe child property returns an active HTMLCollection, which includes all child elements of the specified parent element.

The elements in the collection are sorted in the order they appear in the source code.

You can access each child element in the collection by index number, and the index starts from 0.

Use the length property to determine the number of child elements, and then you can iterate through all child elements.

Note:If the parent element does not have child elements, the child elements are an empty list with a length of 0.

This property is related tochildNodesThe difference between them is that childNodes includes all nodes, including text nodes and comment nodes, while child elements only include element nodes.

Syntax:

ParentElement.children

var list = document.body.children;

Browser Compatibility

The numbers in the table specify the first browser version that fully supports the children property:

Technical Details

More Examples

Find out how many child elements the DIV element has:

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

Change the text of the second child element (index1]'s background color:

var parent = document.querySelector("div");
var list = parent.children;
list[1].style.backgroundColor = "coral";

Change the text of the first child element (index 0) of the DIV element:

var parent = document.querySelector("div");
var list = parent.children;
list[0].innerHTML = "HELLO WORLD";

HTML DOM Element Object