ParentNode.firstElementChild

The ParentNode.firstElementChild read-only property returns the object's first child Element, or null if there are no child elements.

Syntax

var childNode = elementNodeReference.firstElementChild; 

Example

<p id="para-01">
  <span>First span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstElementChild.nodeName)
</script>

In this example, the alert shows 'span', which is the tag name of the first child node of the paragraph element.

Polyfill for Internet Explorer 8

This property is unsupported prior to IE9, so the following snippet can be used to add support to IE8:

// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
if(!("firstElementChild" in document.documentElement)){
    Object.defineProperty(Element.prototype, "firstElementChild", {
        get: function(){
            for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
                if(n = nodes[i], 1 === n.nodeType) return n;
            return null;
        }
    });
}

Specification

Browser compatibility

See also

• The ParentNode and ChildNode pure interfaces.
• Object types implementing this pure interface: Document, Element, and DocumentFragment.