Recomendaciones de cursos:

Atributo firstChild del elemento HTML DOM

firstChild Definición y uso

firstChild El atributo devuelve el primer nodo hijo del nodo especificado, como objeto Node.

firstChild El atributo es solo de lectura. childNodes[0] Iguales.

Nota

firstChild Devuelve el primer nodo hijo: nodo de elemento, nodo de texto o nodo de comentario.

El espacio en blanco entre los elementos también es un nodo de texto.

Solución alternativa:

Atributo firstElementChild - firstElementChild El atributo devuelve el primer elemento hijo (ignora los nodos de texto y de comentario).

Vea también:

Atributo childNodes

Atributo lastChild

Atributo nextSibling

Atributo previousSibling

Atributos de nodo

Atributo parentNode

Atributo nodeName

Atributo nodeType

Atributo nodeValue

Ejemplo

Ejemplo 1

Devuelve el contenido HTML del primer hijo del elemento <ul>:

document.getElementById("myList").firstChild.innerHTML;

Prueba por ti mismo

Ejemplo 2

Obtener el texto del primer hijo del elemento <select>:

let text = document.getElementById("mySelect").firstChild.text;

Prueba por ti mismo

Ejemplo 3

Este ejemplo muestra la interferencia del espacio en blanco.

Intenta obtener el nombre del primer hijo del nodo "myDIV":

<div id="myDIV">
  <p>Se parece al primer hijo</p>
  <p>Se parece al último hijo</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Prueba por ti mismo

Ejemplo 4

Pero, si eliminas los espacios del código fuente, no hay nodo #text en "myDIV":

<div id="myDIV"><p>First child</p><p>Last Child</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>

Prueba por ti mismo

Nodos de HTML y elementos

En DOM de HTMLEn (Modelo de Objetos de HTML), el documento HTML es una colección de nodos que tienen (o no tienen) hijos.

NodoEs un nodo de elemento, de texto y de comentario.

ElementoLos espacios entre elementos también son nodos de texto.

El elemento es solo un nodo de elemento.

Nodos hijos y elementos hijos

childNodes DevuelveNodos hijosNodos de elemento, texto y comentario.

children DevuelveElementos hijosNo devuelve nodos de texto ni de comentario.

firstChild y firstElementChild

firstChild Devuelve el primeroNodos hijosNodos de elemento, texto o comentario. Los espacios entre elementos también son nodos de texto.

firstElementChild Devuelve el primeroElementos hijosNo devuelve nodos de texto ni de comentario.

lastChild y lastElementChild

lastChild Devuelve el últimoNodos hijosNodos de elemento, texto o comentario. Los espacios entre elementos también son nodos de texto.

lastElementChild Devuelve el últimoElementos hijosNo devuelve nodos de texto ni de comentario.

Sintaxis

elemento.firstChild

o

nodo.firstChild

Valor devuelto

Tipo Descripción
Nodo

El primer hijo del nodo.

Si no hay hijos, devuelve null.

Compatibilidad del navegador

element.firstChild Es una característica del nivel DOM 1 (1998).

Se admite completamente en todos los navegadores:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 9-11 Soporte Soporte Soporte Soporte