ParentNode.firstElementChild

La propiedad de sólo lectura ParentNode.firstElementChild retorna el primer hijo del objeto Element, o bien null si no existen elementos hijos.

Sintaxis

var childNode = elementNodeReference.firstElementChild; 

Ejemplo

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

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

En este ejemlpo, la alerta muestra 'span', que es el nombre de la etiqueta del primer nodo hijo dele elemento párrafo.

Polyfill para Internet Explorer 8

Esta propiedad no está soportada con anterioridad a  IE9, así que el siguiente fragmento puede ser usado para añadir el soporte a 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;
        }
    });
}

Especificación

Compatibilidad con navegadores

Ver también

• Los interfaces puros ParentNode y ChildNode.
• Objetos que implementan estos interfaces puros: Document, Element, y DocumentFragment.