Latest web development tutorials
 

HTML DOM firstElementChild Propery

< Element Object

Example

Get the HTML content of the first child element of an <ul> element:

var x = document.getElementById("myList").firstElementChild.innerHTML;

The result of x will be:

Coffee
Try it Yourself »

More "Try it Yourself" examples below.


Definition and Usage

The firstElementChild property returns the first child element of the specified element.

The difference between this property and firstChild, is that firstChild returns the first child node as an element node, a text node or a comment node (depending on which one's first), while firstElementChild returns the first child node as an element node (ignores text and comment nodes).

This property is read-only.

Tip: Use the children property to return any child element of a specified element. children[0] will produce the same result as firstElementChild.

Tip: To return the last child element of a specified element, use the lastElementChild property.


Browser Support

Property
firstElementChild 2.0 9.0 3.5 4.0 10.0

Syntax

element.firstElementChild

Technical Details

Return Value: A Node object, representing the first child element of an element, or null if there are no child elements
DOM Version Core Level 3 Element Traversal

Examples

More Examples

Example

Get the tag name of the first child element of a <div> element:

var x = document.getElementById("myDIV").firstElementChild.tagName;
document.getElementById("demo").innerHTML = x;

The result of x will be:

P
Try it Yourself »

Example

Get the text of the first element node of a <select> element:

var x = document.getElementById("mySelect").firstElementChild.text;

The result of x will be:

Audi
Try it Yourself »

< Element Object