Cuando trabajas con el DOM en JavaScript, a menudo obtienes una NodeList como resultado de métodos como querySelectorAll(). Sin embargo, las NodeList no son arrays y carecen de muchos de los métodos útiles de los arrays. Afortunadamente, puedes convertir fácilmente una NodeList en un array para aprovechar todas las funcionalidades que ofrece JavaScript. En este artículo, exploraremos cómo hacerlo.

¿Qué es un NodeList?

Una NodeList es un objeto similar a un array que representa una lista de nodos del DOM. A menudo se obtiene como resultado de métodos como querySelectorAll().

Ventajas de convertir a un Array

Una vez que tienes la NodeList convertida en un array, puedes usar todos los métodos y propiedades de los arrays, como forEach(), map(), filter(), reduce(), etc.

Pasos para convertir un NodeList a un Array

Paso 1: Obtener la NodeList

Primero, obtén la NodeList utilizando un método como querySelectorAll().

const nodos = document.querySelectorAll('.mi-clase');

Paso 2: Convertir a un Array

Puedes usar varios métodos para convertir la NodeList en un array. Aquí hay tres formas comunes de hacerlo:

1. Usando Array.from()

El método Array.from() toma un objeto iterable (como una NodeList) y lo convierte en un array.

const array = Array.from(nodos);

2. Usando el spread operator (...)

El operador de propagación o spread operator (...) también puede convertir una NodeList en un array.

3. Iterando y construyendo el array manualmente

También puedes convertir manualmente una NodeList en un array utilizando un bucle for o un método de iteración de arrays.

const array = [];

for (let i = 0; i < nodos.length; i++) {

array.push(nodos[i]);

}

Ejemplo completo

const nodos = document.querySelectorAll('.mi-clase');



// Usando Array.from()

const array1 = Array.from(nodos);



// Usando el spread operator

const array2 = [...nodos];



// Construyendo manualmente el array

const array3 = [];

for (let i = 0; i < nodos.length; i++) {

    array3.push(nodos[i]);

}

¡Contáctanos!

Si tienes preguntas, aclaraciones, sugerencias de temas o cualquier otra consulta, ¡no dudes en ponerte en contacto con nosotros! Por favor, completa el formulario de contacto disponible en este enlace, y estaremos encantados de ayudarte.