Erro de acesso a array de elementos em JavaScript
Às vezes, programadores iniciantes tentam trabalhar com um array de elementos como se fosse um único elemento. Vamos ver qual é a essência desse erro.
Suponha que temos os parágrafos:
<p>1</p>
<p>2</p>
<p>3</p>
Suponha que um programador decidiu escrever o mesmo valor no texto de cada parágrafo. Para isso, ele obteve as referências a esses elementos em uma variável:
let elems = document.querySelectorAll('p');
Em seguida, nosso programador erroneamente acessou nossa variável como se ela contivesse um único elemento, e não um array. Como resultado, o texto dos parágrafos não será alterado, mas, caracteristicamente, também não haverá nenhum erro no console:
elems.textContent = '!';
A solução correta aqui seria iterar sobre o array de elementos com um loop e para cada elemento individualmente executar a operação necessária:
for (let elem of elems) {
elem.textContent = '!';
}