Obtenha todos os elementos que contêm uma classe com o QuerySelector

Existem muitas situações em que os desenvolvedores precisam selecionar um grupo de elementos que compartilhem propriedades semelhantes. Por exemplo, aplicando algumas funcionalidades coletivas nos elementos especificados, os desenvolvedores podem precisar verificar e obter os elementos que contêm o mesmo nome de classe.

Mais especificamente, a recuperação de elementos pelo nome da classe é feita usando os métodos JavaScript, como “getElementsByClassName () "," QuerySelector () "e" QuerySelectorAll ()" métodos. O "QuerySelector ()”O método fornece apenas a primeira partida do seletor dado enquanto o "GetElementsByClassName ()" e "QuerySelectorAll ()" Métodos retornam uma variedade de elementos que correspondem ao nome de classe específico.

Este tutorial descreverá a maneira de recuperar todos os elementos que contêm a mesma classe usando o QuerySelector.

Como obter todos os elementos que contêm uma classe com o queryselector?

O seletor de consulta apenas fornece a primeira instância que corresponde ao nome da classe. Para obter todos os elementos, utilize o “QuerySelectorAll ()”Método. Ele retorna um grupo de todos os elementos que correspondem ao seletor especificado, como um nome de classe específico.

Exemplo 1: Obtenha todos os elementos que contêm uma classe com o método querySelector ()

Crie botões e atribua um “btn”Classe para estilizá -los:

Botão
Botão
Botão

Agora, obtenha todos os elementos do botão usando um nome de classe especificado com a ajuda do “QuerySelector ()”Método:

console.log (documento.QuerySelector ('.btn '));

A saída indica que apenas o primeiro elemento do botão foi recuperado usando o método querySelector ():

Vamos ver o que acontecerá quando tentarmos estilizar os botões usando o método QuerySelector ().

Primeiro, armazene as referências de todos os botões na variável “botão”:

var Button = documento.QuerySelector ('.btn ');

Agora, aplique a cor de fundo para todos os botões usando o “estilo" propriedade:

botão.estilo.AntecedentesColor = "Gray";

Como você pode ver na saída, a cor é aplicada apenas no primeiro botão:

Exemplo 2: Obtenha todos os elementos que contêm uma classe com o método querySelectorAll ()

O "QuerySelectorAll ()”O método fornece a lista de elementos corresponde ao seletor específico:

console.log (documento.QuerySelectorAll ('.btn '));

Saída

Obtenha todos os botões usando o “QuerySelectorAll ()”Método, passando o nome da classe para estilizá -los:

var Button = documento.QuerySelectorAll ('.btn ');

Para estilo de estilo de elementos, use a abordagem de loop for para iterar todos os nó e defina a cor do fundo “cinza”:

para (vamos i = 0; i < button.length; i++)
Botão [i].estilo.AntecedentesColor = "Gray";

Pode -se observar que todos os botões foram estilizados com sucesso:

Compilamos todas as informações relevantes relacionadas a obter elementos que contêm a mesma classe com o QuerySelector.

Conclusão

Para obter todos os elementos da mesma classe, utilize o “QuerySelectorAll ()”Método em vez de“QuerySelector ()”. Porque apenas fornece a primeira instância ou elemento que contém o nome de classe específico. Este tutorial descreveu a maneira de recuperar todos os elementos HTML que mantêm o mesmo nome de classe.