Substituir getElementById por querySelector. JavaScript dica 30

Bem vindo a dica 30 de JavaScript da Em Busca do Código, nosso canal exclusivo de programação e tecnologia.

O vídeo complementa o texto e o texto completa o vídeo, assista.

E como o título já diz, nessa dica nós iremos substituir getElementById por querySelector. Para realizar esta dica você precisa de um arquivo HTML linkando um .js. O editor de texto que utilizo é o open source Brackets e o navegador é o Mozilla Firefox. Mas nesta dica você pode utilizar o editor e navegador de sua preferência.

O que é querySelector?

QuerySlector é um método JavaScript que retorna o primeiro elemento filho de um determinado seletor CSS previamente especificado, mas vamos primeiro exemplo.

Nosso primeiro exemplo consiste em pegar o código fonte da nossa dica anterior e substituir o getElementById por querySelector.

Só lembrando que:

Na dica anterior nós acabamos de "transformar" o que é digitado pelo usuário em uma variável. E vamos fazer a mesma coisa agora. O que iremos mudar é apenas no JavaScript.

A única informação que alteramos inicialmente é, substituir getElementById por querySelector.

GetElementById é apenas uma variante de getElementBy, que só trabalha com IDs, substituindo-o por querySelector poderemos trabalhar com class (classes), poderemos trabalhar com elemenmos como a tag p.

Mas do jeito que está ainda não funciona. Precisamos informar qual elemento HTML estamos selecionando. Para este primeiro exemplo ficar mais legal, vou substituir o ID da tag p deste elemento por uma classe.

Agora sim eu vou informar que valor é um ID e valorDigitado uma classe e que valor é um ID.

Vale a pena salientar que, com querySelector nós poderíamos gerenciar o conteúdo exclusivamente da tag p, mas vamos deixar assim por enquanto, teste em seu navegador.

Segundo exemplo

Em nosso segundo exemplo nós teremos uma <div> com um <h2> e uma <p> como filhos, e ambos os filhos recebem a mesma classe. Isso é claro, nem nosso doc HTML.

Logo em seguida criamos um botão com um evento onclick que, a partir dele iremos utilizar nosso querySelector para da primeira tag filho da nossa <div>.

Agora vamos ao .js. Em nosso JS criamos a função que acabamos de declarar no HTML.

Vou fazer algo "diferente" nesse exemplo, que é utilizar uma variável local. O valor dessa variável irá alterar o valor do primeiro elemento CSS que foi especificado.

Sim, estamos selecionando a <div> com querySelector, e na próxima linha do nosso código fonte nós informamos um valor a nossa variável local, só que, já informando que, esse valor, depois do click irá substituir o que está escrito no primeiro elemento filho da nossa <div>.

Essas duas últimas linhas de código dentro da função. Teste em seu navegador.

Testando conseguimos ver que somente o valor da primeira tag filho foi alterado, que por algum acaso é uma tag h2. Insira a tag p (segunda tag filho) antes da tag h2 e veja novamente e abra novamente o HTML para conferir que, dessa vez é alterado o que está escrito da tag p.

Tem muito mais informação que poderia passar sobre querySelector, mas essa dica fica por aqui. No percorrer dessas 100 dicas de JavaScript utilizaremos mais querySelector, muitas vezes, em sua maioria, o método querySelector nem estará no título, mas, estaremos utilizando para chegar ao resultado das próximas dicas.

A seguir temos uma ampla gama de fontes sobre querySelector, li todas que estou passando para vocês, algumas são bem pequenas, outras bem mais elaboradas. Todos os links das fontes abrem em outra aba.

Fontes (abrem em outra aba):

Chegamos a mais de 1000 inscritos no YouTube, se você é uma dessas pessoas inscritas, desde já meu muito obrigado. Ainda esse mÊs teremos um vídeo um pouco diferente por causa disso, espero que goste.