O JavaScript é usado principalmente para adicionar conteúdo interativo e dinâmico às páginas HTML estáticas, mas para adicionar esse conteúdo necessário para acessar os elementos HTML que estão presentes no DOM (modelo de objeto de documento). JavaScript oferece vários métodos diferentes para acessar os elementos HTML presentes no documento. Aqui discutiremos em detalhes, qual é o QuerySelector () método e como usá -lo:

O que é o método querySelector () em JavaScript

Você deseja procurar e acessar qualquer elemento no documento? O QuerySelector () é o método perfeito que você tem para a funcionalidade proposta.

O QuerySelector () é um método em JavaScript que desempenha um papel importante na busca de elementos. É um método da API DOM que nos permite obter ou recuperar um único elemento que corresponda ao parâmetro que está sendo passado.

O QuerySelector () retorna nulo se não forem encontradas correspondências; No entanto, se houver duas partidas no documento, ele acessará apenas a primeira ocorrência.

Agora discutiremos a sintaxe do QuerySelector () método antes de passar para os exemplos para entender melhor o QuerySelector () método.

Sintaxe

elemento = documento.QuerySelector (seletor (s));

O QuerySelector () O método leva apenas um parâmetro que especifica um ou mais seletores; Esses seletores são usados ​​para selecionar o primeiro elemento HTML com base em seu tipo, atributo ou o valor de seu atributo, etc.

Aqui usaremos diferentes seletores CSS para mostrar corretamente como o QuerySelector () Método realmente funciona:

O seletor universal

O sinal de asterisco (*) é conhecido como seletor universal; É usado para acessar todos os elementos do documento:

Olá!

Bem -vindo à dica do Linux!

O seletor de tipo/tag

Podemos procurar qualquer elemento passando o valor de sua tag para o QuerySelector () método.

Por exemplo, se queremos obter o ““

” Tag do HTML DOM e altere sua cor para vermelho, o código será assim:

Html

Olá!

Bem -vindo à dica do Linux!

JavaScript

O seletor de identificação

O # O sinal é usado para selecionar um elemento com base em seu ID; Os IDs devem ser únicos e não há dois elementos em uma única página HTML deve ter o mesmo ID:

Por exemplo, para alterar a cor de um elemento HTML cujo ID é "Exemplo-Id", o código ficará assim:

Html

Olá!

Bem -vindo à dica do Linux!

JavaScript

O seletor de classe

O ponto ““.” O sinal é o seletor do atributo de classe que é usado para selecionar um elemento baseado em sua classe. Vários elementos podem ter a mesma classe, mas o QuerySelector () O método retornará apenas o primeiro elemento:

Por exemplo, para alterar a cor de fundo de um elemento HTML cuja classe é "classe de exemplo", o código será assim:

Html

Olá!

Bem -vindo à dica do Linux!

JavaScript

Vários seletores

Podemos dar uma combinação de múltiplos seletores o QuerySelector () Método também, esses seletores devem ser separados por vírgulas. No entanto, ele apenas acessará um único elemento, o que ocorre primeiro na sequência de código HTML:

Por exemplo, se mencionarmos duas tags HTML no método QuerySelector ():

Enquanto nossas tags HTML são colocadas na seguinte sequência

Olá!

Bem -vindo à dica do Linux!

Método JavaScript querySelector () - explicado

O QuerySelector () o método retornará apenas a primeira partida que é

marcação:

Para acessar vários elementos no JavaScript, o método querySelectorAll () é usado:

Método querySelectorAll () em JavaScript

Suponha que queremos mudar a cor de todos os

Tags cuja classe é "verde". O HTML e o JavaScript vão assim:

Html

Bem -vindo à dica do Linux!

Bem -vindo à dica do Linux!

Bem -vindo à dica do Linux!

Bem -vindo à dica do Linux!

Bem -vindo à dica do Linux!

JavaScript

Conclusão

O QuerySelector () O método é uma maneira eficiente de acessar elementos HTML em DOM. JavaScript fornece outros métodos para acessar elementos DOM também, mas QuerySelector () é o mais versátil e oferece mais opções quando se trata de manipulação de Dom. Desde a introdução aos exemplos, este post explicou e esclareceu quase todos os aspectos precisamente e minuciosamente. Com a ajuda de exemplos, ele descreveu claramente o conceito de QuerySelector () método.