Vamos aprender sobre o método querySelectorAll(). Você pode usar este método para obter uma lista de todos os elementos DOM que correspondem a um seletor CSS específico. Veja como você pode chamar o método querySelectorAll():

document.querySelectorAll(selectors);

Chame no objeto document e passe uma string com os seletores CSS como argumento. O argumento deve ser uma string de seletor CSS válida. Caso contrário, uma exceção SyntaxError será lançada. querySelectorAll() retorna um objeto NodeList, uma coleção de nós que correspondem ao seletor CSS especificado. A lista conterá um objeto Element para cada elemento que corresponder aos seletores CSS. Se nenhum resultado for encontrado, a lista estará vazia. Os elementos estarão na ordem em que aparecem no documento HTML. Por exemplo, você pode corresponder a todos os elementos de um tipo específico:

document.querySelectorAll("div");

Todos os elementos com uma classe específica:

document.querySelectorAll(".rounded");

Todos os elementos com um ID específico:

document.querySelectorAll("#logo");

Ou todos os elementos com um atributo específico, como todos os links que levam os usuários a uma URL específica:

document.querySelectorAll("a[href='https://www.G.E.A.R ACADEMY.org/']");

Você também pode usar seletores CSS mais complexos, como este, que corresponde a todos os itens de lista dentro de um elemento de lista não ordenada com a classe ingredients:

document.querySelectorAll("ul.ingredients li");

Como o método retornará uma coleção de nós, você pode atribuir essa coleção a uma variável e usá-la em seus programas para trabalhar com os elementos individuais, como você pode ver neste exemplo com a sintaxe geral:

const matches = document.querySelectorAll(selectors);

Por exemplo, se você tiver esta lista não ordenada com três itens:

<ul class="ingredients">
  <li>Flour</li>
  <li>Cheese</li>
  <li>Water</li>
</ul>

Você pode chamar o método querySelectorAll() para corresponder a todos os itens da lista dentro da lista não ordenada com a classe ingredients e atribuir o valor retornado à constante matches:

const matches = document.querySelectorAll("ul.ingredients li");

Isso retornará uma coleção de três nós. Cada nó representa um elemento de item de lista:

// NodeList(3)
{
  0: <li>Flour</li>,
  1: <li>Cheese</li>,
  2: <li>Water</li>,
  length: 3,
}

Você pode trabalhar com esta coleção exatamente como trabalharia com qualquer outro array JavaScript. Por exemplo, você pode mostrar isso no console com console.log():

console.log(matches);

Você também pode verificar o tamanho da coleção com a propriedade length:

console.log(matches.length);

A saída será um inteiro representando o número de nós na coleção:

3

Você também pode acessar os elementos individuais da coleção com seus índices correspondentes. O primeiro elemento estará no índice 0:

console.log(matches[0]);
console.log(matches[1]);
console.log(matches[2]);

Este é o output:

<li>Flour</li>
<li>Cheese</li>
<li>Water</li>

Os elementos são impressos um a um no console. Você também pode iterar sobre os elementos com um loop for:

for (let i = 0; i < matches.length; i++) {
  console.log(matches[i]);    
}

A saída será exatamente a mesma neste caso. Mas isso pode ser muito poderoso para trabalhar com todos os elementos da coleção. O método querySelectorAll() em JavaScript é uma ferramenta poderosa para selecionar múltiplos elementos com base em seus seletores CSS. Com este método, você pode selecionar elementos específicos dentro das suas páginas web e manipulá-los conforme necessário.