Agora que você já entende o que é o DOM, chegou a hora de aprender como selecionar elementos da página usando JavaScript.

Essa é uma das habilidades mais importantes para quem trabalha com JavaScript na web.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Selecionar elementos do DOM
  • Usar querySelector
  • Usar querySelectorAll
  • Entender seletores CSS no JavaScript

🧠 O que significa “selecionar” um elemento?

Selecionar um elemento significa encontrar um elemento HTML para poder manipulá-lo com JavaScript.

Antes de alterar texto, estilo ou responder a eventos, o JavaScript precisa saber qual elemento estamos falando.

🔑 O método querySelector

O método querySelector() permite selecionar o primeiro elemento que corresponde a um seletor CSS. 

 document.querySelector("seletor");

O seletor usado é o mesmo do CSS.

🎯 Selecionando por tag

Podemos selecionar elementos pelo nome da tag: 

 let titulo = document.querySelector("h1");

Isso seleciona o primeiro <h1> da página.

🏷️ Selecionando por classe

Para selecionar por classe, usamos o ponto .. 

 let texto = document.querySelector(".cb-text");

Esse código seleciona o primeiro elemento com a classe cb-text.

🆔 Selecionando por id

Para selecionar por id, usamos o símbolo #. 

 let botao = document.querySelector("#meuBotao");

O id deve ser único na página.

📦 Selecionando vários elementos

O método querySelectorAll() seleciona todos os elementos que correspondem ao seletor. 

 let itens = document.querySelectorAll("li");

O retorno é uma NodeList, semelhante a um array.

🔁 Percorrendo elementos selecionados

Podemos percorrer os elementos usando forEach: 

 
  itens.forEach(function(item) 
  { 
    console.log(item.textContent); 
  });

⚠️ E se o elemento não existir?

Se nenhum elemento for encontrado, querySelector retorna null. 

 
  let elemento = document.querySelector(".inexistente"); 
  console.log(elemento);
console.log(pessoa.idade);

Essa forma é simples e fácil de ler.

O código acima resultará na seguinte saída:

Sempre verifique se o elemento existe antes de manipulá-lo.

🧠 Boas práticas

  • Use seletores claros e específicos
  • Prefira querySelector e querySelectorAll
  • Verifique se o elemento existe
Se você sabe CSS, já sabe selecionar elementos no JavaScript.

Resumo da aula para nunca mais esquecer

  • querySelector seleciona o primeiro elemento.
  • querySelectorAll seleciona vários elementos.
  • Os seletores são os mesmos do CSS.
  • Elementos inexistentes retornam null.

▶️ Próxima aula

Na próxima aula, vamos aprender sobre eventos básicos, como cliques e interações do usuário.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Nintendo Wii

Nos primeiros oito dias após o lançamento do console Nintendo Wii foram vendidas 600 mil unidades. Isso equivale a quase um por segundo e estes incríveis números são referentes às vendas apenas nos EUA!

Tetris

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

Recorde de patentes

A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.

ENIAC

O ENIAC, primeiro computador valvulado do mundo, possuía 17.000 válvulas, 500.000 pontos de solda, 30 toneladas de peso e ocupava uma área de 180 metros quadrados. Clique aqui e conheça mais sobre a história dos computadores.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.