JavaScript children Property Tutorial

In this section, we will learn what the Element children property is and how to use it in JavaScript.

What is Element children Property in JavaScript?

The JavaScript Element children property is used to get a reference to the entire element-nodes of the target element.

Note that we say a reference to the entire `element-nodes`! This means if the target element has text-nodes, or comment-nodes, they won’t be included as the items of the reference collection that the `children` property returns.

Element children Property Syntax:

element.children;

Element children Property Input Value

The children property is read-only and so we can’t assign a value to it.

Element children Property Return Value

The return value of this property is a reference to a collection that is called HTMLCollection.

It contains the entire children of type element-node of the target element, set as its items.

Example: JavaScript get child element

See the Pen JavaScript get child element by Omid Dehghan (@odchan1) on CodePen.

Note: if you change the `children` property in this example with `childNodes` property, you’ll get 10 elements (including 5 text-nodes that were excluded from the collection of the `children` property).

Leave a Reply