Entrar Ainda não tem acesso?
2
respostas

Aula 1 - Exercicio 01

Referente ao curso JavaScript: manipulando elementos no DOM, no capítulo Iniciando o projeto Fokus e atividade Lista de exercícios

por Gabriel Cerqueira Gomes
| 28.2k xp | 3 posts
Analista de Suporte

Por qual motivo possui na correção do exercício o document.querySelector('.app__card-primary-button') e abaixo o document.querySelector('#timer'); ? Ambos não farão a mesma função? em meu código eu havia inserido apenas o document.querySelector('.app__card-timer') , estaria errado dessa forma?

2 respostas
por Victor Costa Santos
| 1946.9k xp | 3757 posts
Alura Scuba Team Monitor de ForumOps

Oi Gabriel!

O document.querySelector('.app__card-primary-button') está selecionando um elemento com a classe app__card-primary-button.

E o document.querySelector('#timer') está selecionando um elemento com o ID timer. IDs são únicos dentro de um documento HTML, então esse seletor é usado para capturar um elemento específico e único.

Se você está tentando selecionar o elemento onde o timer será exibido, document.querySelector('.app__card-timer') faz sentido.

No entanto, se precisar interagir com o elemento que possui o ID timer, utilize document.querySelector('#timer'). Isso é necessário caso deseje manipular esse elemento de maneira específica, como por exemplo atualizar seu conteúdo.

Portanto, ambas as seleções de elementos têm suas próprias funções e dependem do que você deseja alcançar no seu código. Se precisar selecionar um elemento específico com um ID único, use document.querySelector('#id'). Se quiser selecionar um elemento com base em sua classe, use document.querySelector('.classe'). Recomendo que especifique, como na aula.

Em resumo, ao selecionar um elemento por seu ID, você utiliza o seletor #id, garantindo que apenas o elemento com aquele ID único seja selecionado, mesmo que esteja dentro de outro elemento com classes diferentes.

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Renata Da Silva Abreu
| 35.6k xp | 5 posts

Olá Gabriel, a questão solicita selecionar os seguintes elementos do HTML:

  • O documento HTML, onde serão manipulados os elementos;
  • O elemento HTML onde irá aparecer o temporizador;
  • O elemento HTML no qual as imagens de cada contexto irão trocar de posição;
  • O elemento HTML onde as frases de cada contexto irão trocar de posição.

No entanto, na resposta o instrutor menciona também '.appcard-primary-button' o qual é referente ao botão "Começar". Esse foi um equívoco do instrutor no momento de responder (ou até de formular o exercício) e, acredito que isso possa ter lhe deixado confuso, mas respondendo sua questão: Não, ambos não são o mesmo elemento.

O elemento HTML onde irá aparecer o temporizador é document.querySelector('#timer');

O elemento HTML correspondente ao botão de "Começar" é document.querySelector('.appcard-primary-button');

Usar ID ou Classe? No contexto dessa aula o adequado é usar o id document.querySelector('#timer) pois você estará selecionando um único elemento específico.

Espero que minha resposta tenha te ajudado :) Bons estudos, um abraço!