FirstElementChild

FirstElementChild is a read-only property of the Element interface in the Web Platform. It returns the first child that is an element, or null if the element has no element children. The property ignores non-element nodes, such as text and comment nodes, and only considers direct element children.

The value of firstElementChild is an Element, not a generic Node, and it is useful for quickly accessing the first element child without iterating through all child nodes. It differs from firstChild, which may return a text node or other non-element nodes, and from the children collection, which is a live list of all element children.

Usage examples include retrieving the first list item of a list or the first heading within a container, for instance: const first = document.querySelector('ul').firstElementChild. You can then inspect or manipulate this element if it exists. It returns null when there are no element children.

Browser compatibility for firstElementChild is broad; it is supported by all major modern browsers and has been available since IE9. As a result, it is generally safe to rely on in contemporary web development without polyfills for standard environments.

Limitations and notes: since firstElementChild is read-only, you cannot assign to it. To change which element is the first child, you must modify the DOM (for example, by inserting, removing, or reordering child elements). It is complementary to properties like nextElementSibling and to the broader set of DOM traversal methods used to navigate element trees.