No seu programa JavaScript, pode ser necessário encontrar elementos HTML por seletores CSS para aplicar quaisquer alterações. Os métodos JavaScript que podem ajudá -lo nesse sentido são “QuerySelector ()" e "QuerySelectorAll ()" métodos.

Este artigo discutirá os procedimentos para encontrar os elementos HTML pelos seletores CSS. Além disso, também explicaremos o uso dos métodos de queryselector () e querySelectorall () para descobrir os elementos dos seletores CSS, com a ajuda de exemplos. Então vamos começar!

Método querySelector () para encontrar elementos por seletores CSS

A interface elemento tem um “QuerySelector ()”Método, que pode ser utilizado para encontrar elementos por seletores CSS. O método querySelector () retornará um “nulo”Valor se nenhum elemento de correspondência for encontrado. Este método usa o “Primeira pré-encomenda de profundidade”Método Traversal para atravessar os nós do documento.

Sintaxe

elemento = documento.QuerySelector (seletores);

O método querySelector () leva “Seletores”Como um argumento que é uma string dom compreendendo um ou mais seletores CSS válidos.

Como usar o método queryselector () para encontrar elementos por seletores CSS

Agora, mostraremos o procedimento para encontrar nossos elementos por seletores CSS usando o método QuerySelector ().

Exemplo 1: Usando o método QuerySelector () para encontrar elementos por seletores CSS

No primeiro exemplo, o método querySelector () descobrirá o primeiro

Elemento em Class = “tutorial”E define sua cor de fundo para“amarelo”:

!Doctype html>

Encontrando elementos HTML por seletor CSS

O método querySelector ()

Isso é Linuxhint.com = "tutorial"

O cabeçalho principal

Primeiro parágrafo.

Execute o programa acima em qualquer editor de código ou caixa de codificação on-line, no entanto, utilizaremos o JSBIN para esse fim:

Como você pode ver o fundo do primeiro “

”O elemento é alterado para“amarelo”:

Exemplo 2: Usando o método QuerySelector () para encontrar elementos por seletores CSS

O programa abaixo do dado mudará o elemento de texto com id = “amostra”:

Encontrando elementos dos seletores CSS

O método querySelector ()

Vamos mudar o elemento de texto com:

Este é um elemento P tendo o.

A execução do código acima dado mostrará a seguinte saída:

Exemplo 3: Usando o método QuerySelector () para encontrar elementos por seletores CSS

No terceiro exemplo, usaremos o “QuerySelector ()”Método para encontrar o primeiro

elemento com o pai e depois alterar sua cor de fundo para “amarelo”:

Primeiro elemento

Eu sou o primeiro elemento P e o elemento div é meu pai

Segundo elemento

Eu sou o segundo elemento P e o div é meu pai.

Clique no botão abaixo dado para alterar a cor de fundo do primeiro elemento P

Mudar cor

Clique no "Mudar cor”Botão para alterar a cor de fundo do primeiro

elemento:

QuerySelectorAll () para encontrar elementos por seletores CSS

No HTML, o método querySelectorAll () retorna um objeto nodelista estático que compreende uma coleção dos elementos filhos de um elemento combinado com os seletores CSS especificados. Os números de índice são usados ​​para descobrir os nós, começando em 0.

Sintaxe

elemento.QuerySelectorAll (seletores)

O método querySelectorAll () leva “Seletores”Como argumento, que é uma string dom que compreende um ou mais seletores CSS válidos.

Exemplo 1: Usando o método QuerySelectorall () para encontrar elementos por seletores CSS

No primeiro exemplo, usaremos o método querySelectorAll () para encontrar todos

elementos no documento. Depois de fazer isso, ele definirá o “cor de fundo" de primeira

elemento para “rosa”:

Principal com o cabeçalho

Primeiro parágrafo com.

Segundo parágrafo com.

Altere a cor de fundo do primeiro elemento P com

Mudar cor

Nota: estamos aprendendo a encontrar elementos por seletores CSS

Como você pode ver, o fundo do primeiro

O elemento é alterado para “rosa”:

Exemplo 2: Usando o método QuerySelectorall () para encontrar elementos por seletores CSS

Agora, escreveremos um programa JavaScript para descobrir o número total de elementos com o “tutorial”Classe utilizando a“comprimentoPropriedade do objeto Nodelist:

O primeiro elemento div com


Segundo elemento div com

Um elemento P com

Clique no botão a seguir para descobrir como o número de elementos com a classe "tutorial"

Clique em mim

Agora, a saída mostrará um “Clique em mim" botão; Clique nele para verificar o número de elementos com classe = “tutorial”:

Exemplo 3: Usando o método QuerySelectorall () para encontrar elementos por seletores CSS

No exemplo a seguir, usaremos o método querySelectorAll () para encontrar “H2","div", e "período”Elementos. Depois de encontrar os elementos especificados, mudaremos sua cor de fundo para "vermelho":

O elemento principal

O segundo elemento H2

Um elemento div

Um elemento P.

Um elemento p tendo = "cor: azul;"> span elemento

Clique no botão a seguir para definir a cor de fundo de todos os elementos H2, DIV e SPAN.

Mudar cor

Clicar no botão destacado alterará a cor de fundo dos elementos H2, DIV e Span:

Conclusão

Usando os métodos QuerySelector () e QuerySelectorAll (), você pode descobrir os elementos dos seletores CSS. O QuerySelector () Método da interface elemento retorna uma lista de nodelas com o primeiro elemento correspondente. Por outro lado, o QuerySelectorAll () O método retorna um objeto nodelista estático com os elementos filhos combinados com os seletores CSS especificados. Este artigo discutiu o procedimento para encontrar os elementos HTML pelos seletores CSS. Também explicamos o uso dos métodos de queryselector () e querySelectorall () para descobrir os elementos dos seletores CSS.