Em JavaScript, o “ querySelectorAll() ” recupera o primeiro elemento que corresponde exatamente aos seletores CSS especificados. Este método começa a percorrer a árvore DOM para executar esta tarefa. Depois que o elemento é encontrado, ele aplica as propriedades ou métodos integrados do JavaScript definidos na seção de script para executar tarefas especiais. Esse método geralmente é usado para selecionar os elementos de destino de acordo com os requisitos. Ele permite que os usuários selecionem todos os elementos que correspondem ao seletor especificado ou aquele específico colocado no índice fornecido.
Este guia ilustra o uso do método “querySelectorAll()” em JavaScript.
Como usar o método “querySelectorAll ()” em JavaScript?
Para usar o “ querySelectorAll() ” método, especifique o seletor CSS como seu argumento. Os seletores CSS incluem “Type, Class e id”. Se o seletor CSS for inválido, ele retornará um erro de sintaxe, caso contrário, retornará um objeto NodeList estático como saída padrão.
Sintaxe
document.querySelectorAll ( Seletores de CSS )
Na sintaxe acima, o “ Seletores de CSS ” referem-se a todos os seletores CSS válidos.
Vamos usar a sintaxe definida acima de forma prática.
Código HTML
Visão geral do código HTML fornecido:
< h2 aula = 'demonstração' > Primeiro cabeçalho h2 >< h3 aula = 'demonstração' > Segundo título h3 >
< p aula = 'demonstração' > Primeiro parágrafo p >
< p aula = 'demonstração' > Segundo parágrafo p >
< botão ao clicar = 'jsFunc()' > Clique aqui ! botão >
Nas linhas de código acima:
- O ' ” adiciona um subtítulo com a classe “demo”.
- O ' ” define um segundo subtítulo com a mesma classe chamada “demo”.
- O ' ” incorporam as declarações de parágrafo com a mesma classe, ou seja, “demo”.
- O '
” inclui um novo botão com um evento de mouse “onclick” para executar a função “jsFunc()”.
Observação: O código HTML específico é seguido ao longo deste guia.
Exemplo 1: Aplicando o método “querySelectorAll()” para selecionar elementos com a mesma classe e alterar suas cores
Este exemplo utiliza o método “querySelectorAll()” para selecionar todos os elementos que usam a classe “demo”.
Código JavaScript
Vamos ver o código abaixo indicado:
< roteiro >função jsFunc ( ) {
lista const = document.querySelectorAll ( '.demonstração' ) ;
para ( deixar eu = 0 ; eu < lista.comprimento; i++ ) {
lista [ eu ] .estilo.cor = 'laranja' ;
}
}
roteiro >
Nas linhas de código acima:
- O ' jsFunc() ” está definida.
- Em sua definição, a variável “list” utiliza a função “ querySelectorAll() ” para selecionar todos os elementos com a classe “demo”.
- A seguir, o “ para ” loop inicializa uma lista de nós para iterar ao longo de todos os elementos HTML encontrados com a classe “ demonstração ” e altere a cor do texto usando o botão “ estilo.cor ' propriedade.
Saída
Na saída acima, pode ser visto que a cor do texto dos elementos que compõem o mesmo nome de classe, ou seja, “demo” é alterada ao clicar no botão.
Exemplo 2: Aplicando o método “querySelectorAll()” para selecionar os elementos indexados específicos
Além de todos os elementos, o usuário também pode selecionar o elemento indexado específico com a classe “demo”.
Código JavaScript
Considere o código JavaScript fornecido:
< roteiro >função jsFunc ( ) {
lista const = document.querySelectorAll ( 'h2.demo' ) ;
lista [ 0 ] .estilo.cor = 'verde' ;
}
roteiro >
No trecho de código acima:
- A variável “list” seleciona o elemento “h2” cuja classe é “demo” com a ajuda do “ querySelectorAll() ” método.
- Depois disso, a variável “list” especifica o índice do elemento “h2” para alterar a cor do texto do elemento “H2” colocado no índice “0”.
Saída
A saída mostra que a cor do texto do elemento “H2” colocado no índice zero tem a classe “demo” alterada ao clicar no botão.
Exemplo 3: Aplicando o método “querySelectorAll()” para obter o número de elementos com a mesma classe
Este exemplo recupera o número de elementos com a mesma classe usando o método “querySelectorAll()”.
Código HTML
Primeiro, dê uma olhada no código HTML modificado do “Exemplo 1”:
< p eu ia = 'para' > p >
No código HTML mencionado acima, anexe um parágrafo vazio com um id “para” no final do código HTML “Exemplo 1”.
Código JavaScript
Agora, continue com o código JavaScript:
< roteiro >função jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'para' ) .innerHTML = nodelist.length;
}
roteiro >
De acordo com o trecho de código acima:
- A função “jsFunc()” primeiro seleciona todos os elementos “
” usando a função “ querySelectorAll() ” método.
- Depois disso, o “ getElementById() ” acessa o parágrafo vazio adicionado por meio de seu id “para” para anexá-lo com o valor retornado da propriedade “comprimento” aplicada.
Saída
Como visto, a saída acima mostra um total de “4” elementos que correspondem ao seletor de classe CSS especificado “demo”.
Conclusão
O ' querySelectorAll() ” pode ser usado facilmente especificando o seletor CSS como seu valor. Este método corresponde a cada elemento HTML e seleciona aqueles que correspondem ao seletor especificado. Uma vez que os elementos são selecionados, ele executa a tarefa necessária definida na seção de script. Este guia ilustrou brevemente o uso do método “querySelectorAll()” em JavaScript.