Erro ao obter elementos em JavaScript
Às vezes, programadores iniciantes cometem o erro
de usar o método querySelector para obter um grupo de elementos DOM
em vez do método
querySelectorAll.
Vamos dar uma olhada nas características típicas desse erro. Suponha que temos os seguintes parágrafos:
<p>1</p>
<p>2</p>
<p>3</p>
Um certo programador decidiu obter e exibir no console os textos desses parágrafos. Para fazer isso, ele colocou as referências a esses elementos em uma variável, usando erroneamente o método errado:
let elems = document.querySelector('p');
Em seguida, ele decidiu iterar sobre os parágrafos com um loop e exibir o texto de cada parágrafo no console:
for (let elem of elems) {
console.log(elem.textContent);
}
Como resultado, aparecerá no console um erro característico:
elems is not iterable. Ele indica
que a variável elems não é iterável,
ou seja, não é um array ou algo
que pode ser percorrido por um loop for-of.