Solucionado
Antes de assistir o vídeo tentei fazer sozinho a troca de imagem e fiz dessa forma:
const img= document.querySelector('.app__image-figure');
focoBt.addEventListener('click', () =>{
html.setAttribute('data-contexto', 'foco');
img.innerHTML = `<img class="app__image" src="/imagens/foco.png" alt="">`
})
Deu certo assim, mas minha dúvida é : Dessa forma tambem é correta?
Olá Rodrigo! Como estás?
Quando programamos, existem mesmo muitas formas para chegar a um mesmo resultado. Fico feliz que você tenha encontrado essa! Está correta, sim, porém, a escolha entre as abordagens depende de vários fatores que devem ser considerados.
A abordagem sugerida na aula é mais direta e eficiente para este caso específico, pois é alterar apenas o atributo src é mais eficiente do que recriar o elemento <img> e o código fica mais claro e fácil de entender, pois você está apenas alterando um atributo específico.
Sua abordagem também é super válida, pois funciona bem e utiliza recursos corretos, porém, usar innerHTML para trocar a imagem pode ser menos eficiente, especialmente se você estiver manipulando muitos elementos no DOM. Isso porque innerHTML recria todo o conteúdo interno do elemento, o que pode ser desnecessário.
Além disso, alterar diretamente o HTML pode tornar o código* mais difícil de manter*, especialmente se a estrutura do HTML mudar.
Espero ter contribuído, Rodrigo!
Abraço.