Propiedad firstChild del DOM HTML

Objeto Elemento de HTML DOM

firstChildPropiedad de solo lectura que devuelve el primer hijo del nodo especificado como un objeto Node.

Si el nodo especificado no tiene hijos, este método devolveráVacioValor.

Los espacios en blanco dentro de los elementos se consideran texto, y el texto se considera un nodo. Los comentarios también se consideran nodos.

Para evitar que firstChild devuelva un nodo #text o #comment, se puede utilizarfirstElementChildSólo devuelve el primer elemento del nodo.

Para obtener el último hijo del nodo especificado, utilicelastChildAtributo.

Sintaxis:

node.firstChild

<div>
　　　<p>Esto es el primer P dentro del DIV<1un P</p>
　　　<p>Esto es el primer P dentro del DIV<2un P</p>
　　　<p>Esto es el primer P dentro del DIV<3un P</p>
</div>
<script>
var x = document.querySelector("div").firstChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>

Sin embargo, si eliminamos el espacio entre el DIV y el primer elemento P, el valor devuelto será el etiqueta P en lugar de #text:

<div><p>Esta es la parte del DIV dentro de la1un P</p>
　　　<p>Esto es el primer P dentro del DIV<2un P</p>
　　　<p>Esto es el primer P dentro del DIV<3un P</p>
</div>
<script>
var x = document.querySelector("div").firstChild.nodeName;
document.getElementById("result").innerHTML = x;
</script>

Compatibilidad del navegador

El atributo firstChild es completamente compatible con todos los navegadores:

Detalles técnicos

Referencias relacionadas

Referencia de HTML DOM:nodo propiedad .lastChild

Referencia de HTML DOM:nodo propiedad .childNodes

Referencia de HTML DOM:nodo propiedad .parentNode

Referencia de HTML DOM:nodo propiedad .nextSibling

Referencia de HTML DOM:nodo propiedad .previousSibling

Referencia de HTML DOM:nodo propiedad .nodeName

Objeto Elemento de HTML DOM