por In the world of web development, there are two fundamental elements with which to program: properties and methods. A method is a function belonging to a specific object that executes a specific action. In this post, we will teach you what does the method return querySelectorAllone of the methods to interact with the DOM.
What does the querySelectorAll method return?
Before I show you what the method returns querySelectorAll, We invite you to learn how it works in our posts on the methods to select DOM nodes and the methods querySelector and querySelectorAll.
Contrary to what we could imagine from its description, the method querySelectorAll does not return a array with the list of selected elements. Actually, what the method returns querySelectorAll It is an alternative to a arraycalled NodeList.
As its name indicates, a NodeList is a list or collection of nodes. When searching for the term NodeList On the official page of the Mozilla Developer Network (MDN) you will see that, although it is not a array, an element NodeList can be iterated using the method forEach. Therefore, we can do the following:
subscribeToEvents ( ) {
const inputElements = this.formElement.querySelectorAll(‘input’);
inputElements.forEach ( )
Now what What we cannot do is concatenate a method that requires a array, as are the majority of methods that allow us to manipulate or consult a arraywith a NodeList. An example of this would be the method every. That is, we could not execute the following action:
subscribeToEvents ( ) {
const inputElements = this.formElement.querySelectorAll(‘input’);
inputElements.forEach(inputElement) => {
inputElement.addEventListener(«input», ( ) => {
inputElements.every ((inputElement) => inputElement.value);
});
});
}
}
So, as the method every It is not in the prototype NodeList but in that of array, The previous function will return an error in the console. Therefore, if we want to execute the function subscribeToEvents With this node selection method, we will have to convert a NodeList in a array.
How to convert what the querySelectorAll method returns?
To convert what the method returns querySelectorAll, that is, a NodeList, in a array, we must insert the command Array.from to encapsulate the result of this method. The method array.from allows us to create a new array from an object that can be iterated. That is, the letters in a string of characters string or the different nodes of a NodeList.
Following this logic, we could solve our function by inserting the command as follows:
subscribeToEvents ( ) {
const inputElements = Array.from(this.formElement.querySelectorAll(‘input’));
inputElements.forEach(inputElement) => {
inputElement.addEventListener(«input», ( ) => {
inputElements.every ((inputElement) => inputElement.value);
});
});
}
}
In this way, we have converted what the method returns to us querySelectorAll in a array which can be processed by the method every, making the function behave the way we want.
Whats Next?
Now that you know what the method returns querySelectorAll, We invite you to use this selection method in your own projects! To continue learning about the creation and development of all types of web projects, don’t miss our Full Stack Web Development Bootcamp, where you will learn in depth how to use different tools and languages such as JavaScript, HTML, CSS and JSX. Ask for information and discover how to change your life!