Seria possível 'capturar' uma tag html ou os botões utilizando outros métodos, como por exemplo o getElementByClassName?
const html = document.querySelector('html');
const focoBt = document.getElementsByClassName('appcard-button--foco');
const curtoBt = document.querySelector('.app__card-button--curto');
const longoBt = document.querySelector('.app__card-button--longo');
Tentei e não deu certo.
Olá, Rosemberg! Tudo bem?
Tem diferentes formas e você está no caminho certo! O método getElementsByClassName que você tentou usar é uma maneira válida de selecionar elementos no DOM. No entanto, ele retorna uma coleção de elementos (mesmo que só exista um elemento com a classe especificada), e não um único elemento como o querySelector faz.
Então, se você quiser usar o getElementsByClassName, você precisa especificar qual elemento da coleção você quer, mesmo que só exista um. Você pode fazer isso adicionando [0] no final. Aqui está como você poderia fazer isso com o seu código:
const focoBt = document.getElementsByClassName('appcard-button--foco')[0];
No entanto, se você quiser continuar usando o querySelector, o seu código está correto. Se não estiver funcionando, pode ser que a classe que você está tentando selecionar não exista no seu HTML ou que exista algum erro de digitação. Recomendo que você revise isso.
Espero ter ajudado e Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Obrigado pelo retorno, Victor!
Me permita fazer mais algumas perguntas e sinta-se à vontade para respondê-las separadamente, caso queira.
const focoBt = document.getElementsByClassName('appcard-button--foco')[0];
Dúvida 01 - Esse 'ZERO', entre colchetes, tem a mesma funcionalidade dos índices de um Array, por exemplo? Isso significa que o elemento 'appcard-button--foco' é o primeiro elemento de uma 'coleção de elementos'?
Dúvida 02 - Podemos afirmar que o querrySelector seleciona somente elementos HTML enquanto que os métodos getElementByClassName ou byId seleciona elementos/propriedades CSS?
Dúvida 03 - Como eu faço pra inserir os trechos de código nesse formato que você inseriu? Me refiro aqui nos comentários. Perceba que o seu código vem todo 'formatado/colorido', com essas três bolinhas em cima, rs.
Olá Rosemberg!
Peço desculpas pela demora em obter um retorno
Quanto as dúvidas vou responder isoladamente cada uma delas.
Sim, exatamente. O zero entre colchetes indica que estamos acessando o primeiro elemento da coleção de elementos retornados pela função getElementsByClassName. É semelhante a acessar o primeiro elemento de um array, onde os índices começam em zero.
Não exatamente. Tanto querySelector quanto getElementById e getElementsByClassName podem selecionar elementos HTML. A diferença está na forma como você os seleciona. querySelector usa seletores CSS para encontrar elementos, enquanto getElementById e getElementsByClassName usam IDs e classes, respectivamente, para selecionar elementos.
Para formatar o código, você pode usar markdown. No caso específico de código, você pode colocá-lo entre três crases(SHIFT + acento agudo) antes e depois do bloco de código para que ele seja exibido em uma caixa de código formatada, como exemplificada na imagem a seguir:
Observe que as crases começarem e fecharam o código, o HTML que deixa colorido, pois o código é HTML se fosse CSS, se coloca CSS no lugar e assim por diante.
Espero ter ajudado, abraços!