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

What is Element firstElementChild Property in JavaScript?

The JavaScript Element firstElementChild property is used to get the first child of an element that is an Element-Node and return a reference of that child-element as a result.

Note: the firstChildElement will return the first child of an element that is an Element-Node! That means for the firstChildElement property, if the first child of an element is in fact of type Text-Node for example, that will be ignored and instead this property will look for the first child that is an Element-Node. But there’s another property called firstChild and using this property will return the first child no-matter if it’s an Element-Node, Text-Node or a Comment-Node. So if you need to get the first child of an element and you don’t care if that element might be a Text-Node or a Comment-Node, then use the firstChild property instead of the firstElementChild.

Element firstElementChild Property Syntax:

element.firstElementChild;

Element firstElementChild Property Input Value

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

Element firstElementChild Property Return Value

The return value of this property is the first child of the target element that is an Element-Node.

Note: the value null will return if the target element doesn’t have a child.

Example: JavaScript get child element

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