Element

`Element.prototype.firstElementChild`

Returns the element's first child Element, or null if there are no child elements

Syntax

JavaScript

element.firstElementChild

Return Value

The first child Element, or null

Examples

Basic Usage

const list = document.querySelector('ul')!
const first = list.firstElementChild
console.log(first?.textContent)

Practical Example

function highlightFirst(container: HTMLElement) {
  const first = container.firstElementChild as HTMLElement | null
  if (first) first.style.fontWeight = 'bold'
}

Advanced Usage

const table = document.querySelector('table')!
const firstRow = table.tBodies[0].firstElementChild
console.log(firstRow?.innerHTML)

Understanding Element.prototype.firstElementChild

The Element.prototype.firstElementChild method in JavaScript returns the element's first child Element, or null if there are no child elements. It belongs to the Element object and is one of the most widely used methods for working with element values in modern JavaScript and TypeScript applications.

The method signature is element.firstElementChild. When called, it returns the first child element, or null. Understanding when and how to use firstElementChild() helps you write more expressive, readable code.

Common use cases for Element.prototype.firstElementChild include data transformation, input validation, API response processing, and building reusable utility functions. It works well alongside related methods like dom-lastelementchild, dom-children, dom-parentelement, enabling you to chain operations together for complex data manipulation pipelines.

Browser support for Element.prototype.firstElementChild is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. It is also fully supported in Node.js and Deno. For older environments, transpilation with Babel or a polyfill may be needed.