.querySelector()
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
.querySelector()
Desculpa, não entendi sua pergunta
Segundo a questão, o João quer exibir os produtos usando o JS, no console do navegador. Os produtos são listados no código HTML, como mostra a seguir:
<ul class="lista-produtos">
<li class="produto">Web cam</li>
<li class="produto">Microfone</li>
<li class="produto">Fundo verde</li>
<li class="produto">Notebook</li>
</ul>O código JS de João está assim:
1. var produtos = document.querySelector("produto");
2. for( var i=0 ; i < produtos.length ; i++){
3. var produto = produtos[i];
4. var nomeDoProduto = produto.textContent;
5. console.log(nomeDoProduto);
6. }Porém, o código JS está errado. Na linha 1 ele usa o .querySelector em vez de usar o .querySelectorAll; outro erro é que para referenciar à uma "class", no código HTML, usa-se o "." - assim, o certo é: .querySelectorAll(".produto");
O .querySelector é usado quando pretende-se referenciar a um único seletor CSS ou id, por exemplo. Agora quando pretende-se acessar vários seletores CSS (class), por exemplo, usa-se o .querySelectorAll.
O .querySelectorAll cria um arrey referente as tags setadas com class="produto". Depois pra acessá-las usa-se a estrutura de repetição "for".
Corrigindo o código JS de João, fica assim: