22 abril, 2024

QuerySelectorAll node – improved DOM element selection

The queryselectorall node is a marvel of a method that gives us greater control over the elements of the document. In this article, we delve into what it is and how it is used.

What is QuerySelectorAll?

When you work with JavaScript and venture into the Document Object Model (DOM), you quickly realize the need to select specific elements. It’s like being in a room full of boxes: you need a way to find exactly what you’re looking for without having to open each one of them.

This is where the queryselectorall node comes into play. This method is like a sophisticated metal detector that allows you to search and find all elements that match the CSS selectors you specify. It’s like having a treasure map in your hands that guides you directly to what you need. We show you what it looks like:


The queryselectorall node is a method that, unlike its brother queryselector, does not stop when finding the first element that meets the specified criteria. queryselectorall loops through the DOM from start to finish, returning all elements that match our selectors.

How to use QuerySelectorAll node?

Let’s take a practical example. Suppose you are working on a recipe page and you have a list of ingredients like this:

  • Flour
  • Sugar
  • Eggs
  • Butter

If you wanted to select all the ingredients to, say, change their color, you could use the queryselectorall node like this:

let allIngredients = document.querySelectorAll(‘.ingredient’);

What we would get is a NodeListsimilar to a arraywith all elements that have the class ingredient. We could then iterate on this NodeList and apply the desired modifications to each element.

Now imagine that you are working on a web page full of paragraphs (

). Some contain important information that you want to highlight by changing their color to blue. You could go one by one changing their style, but that sounds exhausting. That’s where the queryselectorall node becomes your best friend.

let paragraphs = document.querySelectorAll(‘p’); paragraphs.forEach(p => p.style.color=»blue»);

Ready! In an instant, every paragraph on your page turns blue. And this is just the tip of the iceberg of what queryselectorall can do for you.

Various selectors with QuerySelectorAll

Another advantage of the queryselectorall node is that you can search for multiple selectors by separating them with a comma, similar to how you would do in a CSS style sheet. For example, if you wanted to select all elements with the class ingredient and all elements with the id dessertyou could do it like this:

letMultipleSelector = document.querySelectorAll(‘.ingredient, #dessert’);

How to find out how many elements the QuerySelectorAll node selects?

One of the most useful properties of the queryselectorall method is length. This property allows us to know how many elements meet the criteria we specify in our text string.

let quantityOfIngredients = document.querySelectorAll(‘.ingredient’).length; console.log(amountOfIngredients); // It will print the number of ingredients

This feature is especially useful when we need to count the selected elements to perform operations on them.

The queryselectorall method is an extremely powerful tool in JavaScript. It allows us to select multiple DOM elements based on specific criteria, giving us great control and flexibility over how we interact with our website. It makes manipulating the DOM easier, improves the efficiency of your code, and allows you to interact with your web page in incredibly flexible ways.

Do you want to learn more?

This is just the beginning. If you want to master web development best practices and learn more about how to interact with the DOM, our recommendation is that you join our Full Stack Web Development Bootcamp. Here you will not only learn about queryselector and the queryselectorall node, but you will gain in-depth and practical knowledge about all the tools and technologies you will need to become a competent web developer. The technology sector is an industry with a high demand for professionals, high salaries and job stability that other sectors do not offer. A life change is within your reach, you just need to take the first step and ask for information!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *