Link do módulo:

dev-em-dobro.ticto.club

Sumário do Módulo:

Exercício 1: Alterando estilos de elementos usando Eventos do JS

Link do Exercício: 1 - Alterando estilos de elementos usando Eventos do JS

querySelector: Características de sua Sintaxe

<aside> 💡

Contexto: Por que a primeira forma funciona, mas a segunda não?

1. Primeira forma:

   const quadradoAzul = document.querySelector('.azul')

2. Segunda forma:

   const quadradoAzul = document.querySelector('azul')

</aside>

querySelector – Como funciona?

O método document.querySelector(selector) aceita qualquer seletor CSS válido. Isso significa que ele espera que você use os mesmos prefixos e sintaxe que usaria em um arquivo CSS.

Primeira forma – Correta:

const quadradoAzul = document.querySelector('.azul')

• Aqui você está dizendo: "Selecione o primeiro elemento que possui a classe azul".

• O . (ponto) indica classe, assim como em CSS:

  .azul { background-color: blue; }
  

Segunda forma – Incorreta:

const quadradoAzul = document.querySelector('azul')

• Neste caso, o JavaScript está tentando encontrar uma tag HTML chamada <azul>, o que não existe no seu código.

• Isso é equivalente a usar:

  <azul></azul>
  
  

  ...o que claramente não faz sentido no seu contexto.

Conclusão: