Manual de referencia de JS DOM

Objeto Elemento de HTML DOM

firstElementChildAtributo de solo lectura que devuelve el primer hijo del elemento padre especificado. HTML DOM firstElementChild Atributo

Si el elemento padre no tiene elementos hijos, este método devolveránullel valor.

UsarchildrenAtributo que devuelve cualquier hijo del elemento padre. children [0] devuelve el mismo resultado que firstElementChild.

Para obtener el último hijo del elemento padre especificado, utilicelastElementChildAtributo.

Sintaxis:

ParentElement.firstElementChild

<div>
　　　<p>Este es el P en el DIV:1un P</p>
　　　<p>Este es el P en el DIV:2un P</p>
　　　<p>Este es el P en el DIV:3un P</p>
</div>
<script>
var x = document.querySelector("div").firstElementChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>

Compatibilidad del navegador

Todos los navegadores soportan completamente el atributo firstElementChild:

Detalles técnicos

Más ejemplos

Obtener el contenido HTML del primer hijo del elemento DIV:

<div>
　　　<p>Este es el P en el DIV:1un P</p>
　　　<p>Este es el P en el DIV:2un P</p>
　　　<p>Este es el P en el DIV:3un P</p>
</div>
<script>
var x = document.querySelector("div").firstElementChild.textContent;
document.getElementById("result").innerHTML = x;
</script>

Cambiar el contenido HTML del primer hijo del elemento DIV:

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

Referencias relacionadas

Referencia de HTML DOM:propiedad lastElementChild

Objeto Elemento de HTML DOM