1
resposta

[Dúvida] Etapa do alugames

Queria saber de ao invez de buscar o elemento pela classe e buscar pela tag tem alguma diferença?, o codigo funciona perfeitamente mas no forum e no video o pessoal usa somente pela class...

function alterarStatus(id) { let jogo = document.getElementById(game-${id}); let imagem = jogo.querySelector('div'); let botao = jogo.querySelector('a');

if(botao.classList.contains('dashboard__item__button--return')){
    botao.classList.remove('dashboard__item__button--return')
    imagem.classList.remove('dashboard__item__img--rented')
    botao.innerHTML=('Alugar');
} else {
    botao.classList.add('dashboard__item__button--return')
    imagem.classList.add('dashboard__item__img--rented')
    botao.innerHTML=('Devolver');
}

}

ao invez de:

function alterarStatus(id) { let jogo = document.getElementById(game-${id}); let imagem = jogo.querySelector('.dashboard__item__img'); let botao = jogo.querySelector('.dashboard__item__button');

if(botao.classList.contains('dashboard__item__button--return')){
    botao.classList.remove('dashboard__item__button--return')
    imagem.classList.remove('dashboard__item__img--rented')
    botao.innerHTML=('Alugar');
} else {
    botao.classList.add('dashboard__item__button--return')
    imagem.classList.add('dashboard__item__img--rented')
    botao.innerHTML=('Devolver');
}

}

1 resposta

Olá, Jonathan! Tudo certo?

Ambas as abordagens têm seus usos e podem funcionar bem, mas há algumas considerações a serem feitas.

  1. Especificidade: Usar classes geralmente oferece mais especificidade e controle. Se você buscar por uma tag, como div ou a, você pode acabar selecionando múltiplos elementos que não são os que você realmente deseja manipular, especialmente se houver muitos elementos do mesmo tipo dentro do seu contêiner. Usar classes ajuda a garantir que você está selecionando o elemento correto.

  2. Manutenção: Se o layout do seu HTML mudar, por exemplo, se a estrutura das tags mudar, buscar por classes pode ser mais resiliente a essas mudanças, desde que as classes permaneçam as mesmas.

  3. Leitura do Código: Usar classes pode tornar o código mais legível e autoexplicativo, já que as classes geralmente têm nomes que descrevem o papel ou o estilo do elemento.

No seu exemplo, ao usar jogo.querySelector('.dashboard__item__img'), você está garantindo que está selecionando especificamente a imagem que tem a classe dashboard__item__img, enquanto jogo.querySelector('div') selecionaria o primeiro div dentro de jogo, que pode não ser o que você deseja se a estrutura mudar.

Se o seu código está funcionando bem agora, isso é ótimo! Mas, para garantir que ele continue funcionando bem no futuro, especialmente se o HTML mudar, pode ser mais seguro e claro usar classes.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.