HTML DOM Element children property

Definition and usage

children Property returns a collection of the element's child elements.

children Property returns an HTMLCollection object.

See also：

firstElementChild property

lastElementChild property

nextElementSibling property

previousElementSibling property

childElementCount property

childNodes property

HTML nodes and elements

In HTML DOM（Document Object Model）, an HTML document is a collection of nodes that have (or do not have) child nodes.

NodeRefers to element nodes, text nodes, and annotation nodes.

ElementThe blank spaces between them are also text nodes.

While elements are just element nodes.

Child nodes and child elements

childNodes ReturnsChild nodes（element nodes, text nodes, and annotation nodes）.

children ReturnsChild elements（not text and annotation nodes）.

Siblings and element siblings

siblingAre 'brother' and 'sister'.

siblingare nodes that have the same parent node (in the same childNodes list).

Element siblingsare elements that have the same parent element (in the same children list).

Example

Example 1

Get the collection of child elements of the <body> element:

const collection = document.body.children;

Try it yourself

Example 2

How many child elements does "myDIV" have:

let count = document.getElementById("myDIV").children.length;

Try it yourself

Example 3

Change the background of the second child element of "myDIV":

const collection = document.getElementById("myDIV").children;
collection[1].style.backgroundColor = "yellow";

Try it yourself

Example 4

Get the text of the third child element (index 2) of the <select> element:

const collection = document.getElementById("mySelect").children[2].text;

Try it yourself

Example 5

Traverse all child elements of <body> and change their background:

const collection = document.body.children;
for (let i = 0; i < collecton.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Try it yourself

Syntax

element.children

Return value

Type Description
Object

HTMLCollection object.

A collection of element nodes.

Elements are sorted in the order they appear in the document.

Browser support

element.children It is a DOM Level 1 (1998) feature.

All browsers fully support it:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support