HTML DOM firstElementChild property

HTML DOM Element Object

firstElementChildRead-only property returns the first child element of the specified parent element.

If the parent element has no child elements, this method will returnnullvalue.

UsechildrenProperty returns any child element of the specified parent element. children [0] will return the same result as firstElementChild.

To return the last child element of the specified parent element, uselastElementChildProperty.

Syntax:

ParentElement.firstElementChild

<div>
　　　<p>This is the first paragraph in the DIV:</p>1a P</p>
　　　<p>This is the first paragraph in the DIV:</p>2a P</p>
　　　<p>This is the first paragraph in the DIV:</p>3a P</p>
</div>
<script>
var x = document.querySelector("div").firstElementChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>

Browser compatibility

All browsers fully support the firstElementChild property:

Technical details

More Examples

Get the HTML content of the first child element of the DIV element:

<div>
　　　<p>This is the first paragraph in the DIV:</p>1a P</p>
　　　<p>This is the first paragraph in the DIV:</p>2a P</p>
　　　<p>This is the first paragraph in the DIV:</p>3a P</p>
</div>
<script>
var x = document.querySelector("div").firstElementChild.textContent;
document.getElementById("result").innerHTML = x;
</script>

Change the HTML content of the first child element of the DIV element:

var div = document.querySelector("div");
div.firstElementChild.textContent = "HELLO WORLD";

Related References

HTML DOM Reference:lastElementChild property

HTML DOM Element Object