Beatriz tem um site com diversos elementos do tipo div, onde foi utilizada uma classe CSS com o nome "opcional", e deseja que eles fiquem ocultos quando forem clicados. Para adicionar a funcionalidade em todos os elementos via JavaScript, ela desenvolveu a função apresentada a seguir. const associar = (elementos) => { for(let obj of elementos) obj.addEventListener('click',(e)=>{ e.target.style.display='none'}); } Para executar a função criada, associando corretamente aos elementos do tipo div, Beatriz deve utilizar para o parâmetro elementos a expressão:
- A)document.getElementsByTagName("div.opcional");
Errada, porque getElementsByTagName seleciona apenas pelo nome da tag e nao aceita a combinacao "div.opcional".
- B)document.getElementsByClassName("opcional");
Certa, porque getElementsByClassName("opcional") retorna todos os elementos que possuem essa classe CSS.
- C)document.getElementsByName("div:opcional");
Errada, porque "getElementsByName" nao usa esse tipo de seletor CSS e a sintaxe informada nao existe.
- D)document.getElementsByClass("opcional");
Errada, porque nao existe o metodo document.getElementsByClass em JavaScript.
- E)document.getElementsById("div.opcional").
Errada, porque getElementById busca um unico elemento pelo id, nao uma classe, e a sintaxe indicada esta incorreta.
Gabarito: B
A questao cobra como selecionar elementos HTML por classe no JavaScript para depois aplicar um event listener em cada um deles. A funcao associar percorre a colecao recebida e adiciona um clique que esconde o proprio elemento ao definir display como 'none'. Ou seja, o ponto principal nao esta no evento em si, mas em passar para a funcao a colecao correta de elementos da pagina. Quando voce quer pegar varios elementos que compartilham uma classe CSS, a forma classica e usar document.getElementsByClassName("opcional"), que devolve uma colecao com todos os elementos que possuem essa classe. Como a funcao faz um for...of, essa colecao precisa ser iteravel, e isso combina bem com o que a API retorna. Ja getElementsByTagName seleciona por nome da tag, como div ou p, e nao aceita seletor com classe junto. Entao a sintaxe "div.opcional" nao funciona ali. A banca costuma testar exatamente essa confusao entre tag, classe e id, porque parece tudo parecido, mas no DOM cada metodo tem seu proprio alvo. Em resumo: para associar a funcao aos divs com classe opcional, voce deve passar a colecao de elementos obtida pela classe. Por isso o gabarito e a alternativa B.