¿Qué devuelve el método querySelectorAll?

Autor: | Última modificación: 14 de noviembre de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post: ,

En el mundo del desarrollo web, existen dos elementos fundamentales con los que programar: propiedades y métodos. Un método es una función perteneciente a un objeto en específico que ejecuta una acción determinada. En este post, te enseñaremos qué devuelve el método querySelectorAll, uno de los métodos para interactuar con el DOM.

¿Qué devuelve el método querySelectorAll?

Antes de enseñarte lo que devuelve el método querySelectorAll, te invitamos a conocer su funcionamiento en nuestros posts sobre los métodos para seleccionar nodos del DOM y los métodos querySelector y querySelectorAll.

Contrario a lo que podríamos imaginar a partir de su descripción, el método querySelectorAll no devuelve un array con el listado de elementos seleccionados. En realidad, lo que devuelve el método querySelectorAll es una alternativa a un array, llamado NodeList.

Como su nombre indica, un NodeList es una lista o colección de nodos. Al buscar el término NodeList en la página oficial de la Mozilla Developer Network (MDN) verás que, aunque no es un array, un elemento NodeList puede ser iterado usando el método forEach. Por ello, podemos hacer lo siguiente:

suscribeToEvents ( ) {

const inputElements = this.formElement.querySelectorAll (‘input’);

inputElements.forEach ( )

Ahora, lo que no podremos hacer es concatenar un método que requiera un array, como lo son la mayoría de métodos que nos permiten manipular o consultar un array, con un NodeList. Un ejemplo de esto sería el método every. Es decir, no podríamos ejecutar la siguiente acción:

suscribeToEvents ( ) {

const inputElements = this.formElement.querySelectorAll (‘input’);

inputElements.forEach (inputElement) => {

inputElement.addEventListener («input», ( ) => {

inputElements.every ((inputElement) => inputElement.value);

});

});

}

}

Entonces, como el método every no está en el prototipo de NodeList sino en el de array, la función anterior nos devolverá un error en consola. Por ello, si queremos ejecutar la función suscribeToEvents con este método de selección de nodos, deberemos convertir un NodeList en un array.

¿Cómo convertir lo que devuelve el método querySelectorAll?

Para convertir lo que devuelve el método querySelectorAll, es decir, un NodeList, en un array, debemos insertar el comando Array.from para encapsular el resultado de este método. El método array.from nos permite crear un nuevo array a partir de un objeto que se puede iterar. Es decir, las letras en una cadena de caracteres string o los distintos nodos de un NodeList.

Siguiendo esta lógica, podríamos solucionar nuestra función insertando el comando de la siguiente manera:

suscribeToEvents ( ) {

const inputElements = Array.from (this.formElement.querySelectorAll (‘input’));

inputElements.forEach (inputElement) => {

inputElement.addEventListener («input», ( ) => {

inputElements.every ((inputElement) => inputElement.value);

});

});

}

}

De este modo, hemos convertido lo que nos devuelve el método querySelectorAll en un array que puede ser procesado por el método every, haciendo que la función se comporte como queremos.

¿Qué sigue?

Ahora que sabes qué devuelve el método querySelectorAll, ¡te invitamos a utilizar este método de selección en tus propios proyectos! Para seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos web, no te pierdas nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás en profundidad a emplear diferentes herramientas y lenguajes como JavaScript, HTML, CSS y JSX. ¡Pide información y descubre cómo cambiar tu vida!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!