Fulano, escreveu o código abaixo para exercitar seus aprendizados.Ele aprendeu que document.querySelectorAll aceita receber um seletor CSS . Como o resultado é sempre um conjunto de dados, podemos percorrer cada elemento através do clássico estrutura de repetição for. Para cada item, adicionamos um evento click. No entanto, Fulano não sabe como fazer que a função passada para o evento click seja chamada levando em consideração o elemento que foi clicado na lista. Ele precisa referenciar o elemento para poder exibir seu texto através de um alert em javascript. Proponha alterações no código abaixo para que ele consiga realizar o que deseja.
Soluções para a tarefa
Retorna uma lista de elementos presentes no documento (usando ordenação em profundidade, pré-ordenada e transversal dos nós do documento) que coincidam com o grupo de seletores especificado. O objeto retornado é uma NodeList.
SintaxeelementList = document.querySelectorAll(selectors);onde
elementList é uma NodeList não-viva (alterações no DOM não refletem na lista) de objetos Element.selectors é uma string contendo um ou mais seletores CSS separados por vírgulas.A NodeList retornada irá conter todos os elementos do documento que coincidam com os seletores especificados. Se a string selectors conter um CSS pseudoelements, o retorno será uma NodeList vazia.
ExemploEsse exemplo retorna uma lista de todos os elementos div presentes no document que contenhasm as classes "note" ou "alert":
var matches = document.querySelectorAll("div.note, div.alert");NotasRetorna uma NodeList não-viva (alterações no DOM não refletem na lista) de todos os elementos que coincidam com os seletores informados.
Lança uma exceção SYNTAX_ERR se o grupo especificado de seletores for inválido.
querySelectorAll() foi introduzida na WebApps API.
Navegadores baseados em WebKit têm um bug: quando a string seletores contém um pseudo-elemento CSS, a NodeList retornada não esta vazia, neste caso ela contém o elemento <html>.
Compatibilidade nos navegadoresWe're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Desktop MobilePossuiChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)Suporte básico13.5 (1.9.1)8103.2 (525.3)EspecificaçãoAPI Selectors