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.
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!
