O querySelector é um método JavaScript que desempenha um papel vital na busca de elementos.

Nesta seção, entenderemos e discutiremos o método querySelector(), seu uso e também veremos um exemplo para entender o conceito do método querySelector() na prática.

Apresentando o método JavaScript querySelector ()

Um método de interface de elemento que nos permite pesquisar e retornar o primeiro elemento do documento. Ele encontra aquele elemento que corresponde a qualquer um dos seletores CSS ou grupo de seletores especificados. No entanto, se nenhum elemento correspondente for encontrado, ele retornará nulo. O método querySelector() é o método apenas da interface Document. Uma interface de documento é uma interface que descreve os métodos comuns, bem como as propriedades de qualquer html, XML ou qualquer outro tipo de documento.

Como o método querySelector() realiza a busca

Sabemos que existem diferentes tipos de pesquisas que podem ser utilizadas para pesquisar elementos. No entanto, o método querySelector() usa pré-encomenda em profundidade travessia dos nós do documento. Nele, o percurso começa com o primeiro elemento na marcação do documento e depois percorre os nós sequenciais por ordem do número de nós filhos.

0,04 como uma fração

Sintaxe

 element = document.querySelector(selectors); 

O método querySelector() é um método de interface de documento e por isso possui tal sintaxe.

Possui um parâmetro, 'seletores', que é uma string DOM e possui um ou mais seletores CSS válidos.

Tipo de retorno

Pode retornar 'null' se nenhuma correspondência for encontrada, e se o primeiro elemento corresponder aos seletores CSS especificados (se houver), ele retornará esse elemento.

No entanto, se não houver nenhum seletor CSS válido, será lançada uma exceção 'SyntaxError'.

Agora, antes de examinar um exemplo de implementação, devemos conhecer os vários tipos de seletores CSS. Se você não sabe, visite nosso https://www.javatpoint.com/css-selector seção do tutorial CSS.

software de sistema

Portanto, implementaremos agora um exemplo no qual cobriremos um seletor CSS e reteremos o valor do primeiro elemento usando o método querySelector ().

Exemplo de implementação de querySelector()

Abaixo está um exemplo de código que nos fará entender o funcionamento do método querySelector():

 class=&apos;colors&apos;&gt;Colors <p> Myclass</p> <p> It is the div p paragraph</p> <p> div p class</p> <p id="myid"> It is p id</p> It is div id //Element selector var e = document.querySelectorAll (&apos;p&apos;); console.log(e); 

Agora você pode ver a diferença entre o código que no primeiro exemplo usamos o método querySelector() e ele gerou apenas o primeiro valor do seletor correspondente. Mas, ao observar a saída deste segundo exemplo, você verá que ele retornou todos os valores correspondentes dos seletores ou grupo de seletores especificados. A saída do código acima é mostrada abaixo:

Explicação do código

• O código acima é uma combinação de HTML e JavaScript.
• Implementamos diferentes seletores CSS no código.
• Na seção JavaScript, usamos um método querySelectorAll() e invocamos um seletor de elemento CSS.
• Portanto, o método querySelectorAll () agora passa para o código para percorrê-lo usando o método de pré-encomenda de profundidade e retorna todos os valores dos elementos correspondentes especificados como parâmetros do método querySlectorAll ().

Portanto, da mesma forma, podemos usar o método querySelectorAll () para vários outros tipos de seletores CSS também, e ele retornará todos os valores correspondentes dos seletores que são especificados como seu argumento. Para implementar o método, substitua o método querySelector() pelo método querySelectorAll() para vários seletores, e o método encontrará a correspondência e retornará pelo menos um valor correspondente do elemento especificado.