Extraiga el primer hijo de un elemento en JavaScript

1. Extraiga el primer hijo de un elemento en JavaScript usando Node.firstChild
2. Extraiga el primer hijo de un elemento en JavaScript usando Node.childNodes
3. Extraiga el primer hijo de un elemento en JavaScript usando Element.children

En la publicación de hoy, aprenderemos a extraer el primer hijo de un elemento en JavaScript.

Extraiga el primer hijo de un elemento en JavaScript usando Node.firstChild

Node.firstChild devuelve el primer hijo del nodo en el árbol, o null si el nodo no tiene hijos. Esta es la propiedad firstChild de solo lectura de la interfaz Node.

Sintaxis:

Node.firstChild

Por ejemplo, tenemos una etiqueta de párrafo que muestra el ¡Hola mundo! texto dentro de él en otra etiqueta de intervalo.

Código HTML:

<p id="firstPara">
    <span>Hello World!</span>
</p>

Código JavaScript:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.firstChild);

Producción :

"#text"

Cuando ejecuta el código anterior en cualquier navegador, la consola del navegador muestra #text. Esto se debe a que se inserta un nodo de texto, de forma predeterminada, para mantener un espacio en blanco entre la etiqueta de fin de párrafo y las etiquetas de apertura de tramo.

Cada espacio en blanco crea automáticamente un nodo #texto, desde un solo espacio hasta múltiples espacios, saltos de línea, tabulaciones, etc.

Para evitar el problema del nodo de texto, puede eliminar el espacio en blanco de la fuente o usar Element.firstElementChild para devolver solo el nodo del primer elemento.

Puede encontrar más información sobre el firstChild en la documentación aquí.

Extraiga el primer hijo de un elemento en JavaScript usando Node.childNodes

Node.childNodes devuelve una lista de nodos activa de los nodos secundarios del elemento especificado, con el índice 0 asignado al primer nodo secundario. Esta es la propiedad childNodes de solo lectura de la interfaz Node.

Los nodos secundarios contienen elementos, textos y comentarios.

Los elementos de la colección de nodos son objetos, no cadenas. Para recuperar datos de objetos de nodo, use sus propiedades.

Por ejemplo, para obtener el nombre del primer nodo secundario, puede usar elementNodeReference.childNodes[0].nodeName.

ChildNodes, por defecto, incluye todos los nodos secundarios, tanto elementos como no elementos. Devuelve una lista de nodos activa que contiene los elementos secundarios del nodo.

Puede encontrar más información sobre childNodes en la documentación aquí.

Por ejemplo, tenemos una etiqueta de párrafo que muestra ¡Hola mundo! texto dentro de él en otra etiqueta de intervalo.

Código HTML:

<p id="firstPara">
    <span>Hello World!</span>
</p>

Código JavaScript:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.childNodes[0]);

Producción :

"#text"

Similar a la sección anterior, por defecto, se inserta un nodo de texto para mantener un espacio en blanco entre el final de la etiqueta de párrafo y la apertura de las etiquetas de intervalo.

Extraiga el primer hijo de un elemento en JavaScript usando Element.children

La propiedad Element.children devuelve una colección HTML en vivo que contiene todos los elementos secundarios del elemento al que se llamó.

La única diferencia entre Element.children y Node.childNodes es que Element.child contiene solo nodos de elementos, mientras que Node.childNodes obtiene todos los nodos secundarios, incluidos los nodos que no son elementos, como texto y comentarios.

Una colección HTML es una colección activa y ordenada de los elementos DOM secundarios del nodo. Puede acceder a cada nodo secundario de la colección utilizando el método item().

Puede encontrar más información sobre los niños en la documentación aquí.

Por ejemplo, tenemos una etiqueta de párrafo que muestra el ¡Hola mundo! texto dentro de él en otra etiqueta de intervalo.

Código HTML:

<p id="firstPara">
    <span>Hello World!</span>
</p>

Código JavaScript:

const firstPara = document.getElementById('firstPara');
console.log(firstPara.children[0]);

Producción :

"Hello World!"

Cuando ejecuta el código anterior en cualquier navegador, la consola del navegador mostrará "¡Hola mundo!". Esto se debe a que esta propiedad solo devuelve elementos DOM del nodo que llama.