O Em Busca do Código é um site em formato de plataforma de ensino a distância (EAD), totalmente aberta e gratuita.

Aprendendo e ensinando, essa é a minha regra para mim.

Publicado dia 09 de julho de 2017.

Compre um adesivo do Em Busca do Código.

Publicidade

Publicidade

Publicidade

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.

Publicidade

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:

<h1>Pegar valor digitado utilizando JavaScript. Dica 29</h1>
<input type="text" id=valor>
<input type="submit" onclick="capturar()" value="escreva algo">
<p id="valorDigitado"></p>

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.

var capturando = "";
function capturar () {
    capturando = document.getElementById('valor').value;
    document.getElementById('valorDigitado').innerHTML = capturando;
}

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

capturando = document.querySelector('valor').value;
document.querySelector('valorDigitado').innerHTML = capturando;

Publicidade

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.

<p class="valorDigitado"></p>

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

capturando = document.querySelector('#valor').value;
document.querySelector('.valorDigitado').innerHTML = capturando;

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.

<div class="a-partir-dessa">
    <h2 class="ok">Oi, eu sou uma tag h2</h2>
    <p class="ok">Oi, eu sou uma tag p</p>
</div>

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>.

<input type="button" onclick="funcao()" value="Click">

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

 function funcao() {

}

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.

let a = document.querySelector(".a-partir-dessa");

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>.

a.querySelector(".ok").innerHTML = "querySelector no primeiro elemento";

Publicidade

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):

Publicidade

Forum Alura: getElementById vs querySelector
W3C: querySelectAll
Mozilla: querySelectorAll (document.)
W3C: Seletores CSS
W3C: querySelector
Mozilla: querySelector
Mozilla: querySelectorAll (element.)
Desenvolvimento para Web: Conhecimentos "avançados"
Dev Furia: nodelist
Turbo Site: Escrever JavaScript.

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.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.