Solucionado
Boa tarde, no inicio da aula quando foi criada a function alterarStatus, foi utilizado o . para indicar que estava falando de uma class. Porém, quando fizemos a condicional if/else para mudar a class de alugado para devolver, não foi preciso colocar o . antes de indicar a class.
Gostaria de entender melhor isso, porque em um caso é utilizado o ponto antes da class e no outro não.
hoje, com a Alura e o Google Gemini
O "document.querySelector()" serve tanto para carregar elementos do DOM quanto para carregar classes CSS.
Por exemplo, o código abaixo carrega a primeira tag HTML de parágrafo da página:
document.querySelector("p");
Portanto, para diferenciar tags HTML de classes do CSS, esse método do "document" utiliza o ponto final na frente das classes passadas como argumento.
Por outro lado, quando se trabalha com o ClassList, todos os métodos trabalham exclusivamente com classes. Ou seja, não há necessidade de diferenciação com ponto final.
Imagino que o código ao qual você se refere seja este abaixo:
function alterarStatus(id) {
let gameClicado = document.getElementById(`game-${id}`);
let imagem = gameClicado.querySelector('.dashboard__item__img');
let botao = gameClicado.querySelector('.dashboard__item__button');
let nomeJogo = gameClicado.querySelector('.dashboard__item__name');
if (imagem.classList.contains('dashboard__item__img--rented')) {
imagem.classList.remove('dashboard__item__img--rented');
botao.classList.remove('dashboard__item__button--return');
botao.textContent = 'Alugar';
} else {
imagem.classList.add('dashboard__item__img--rented');
botao.classList.add('dashboard__item__button--return');
botao.textContent = 'Devolver';
}
}
Resumindo, o método "querySelector()" recebe elementos do HTML e classes como argumento. Os métodos do "classList", tais como o "add()" e o "remove()" só recebem classes. Deste modo, neste último caso não é necessária a utilização do ponto final.
at.te
Boa tarde, agora entendi, obrigada :)