a resposta sobre não ter o ponto no queryselector é incorreta

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:

1. var produtos = document.querySelectorAll(".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. }