Erro ao obter elemento em JavaScript

Às vezes, programadores iniciantes cometem o erro de usar o método querySelectorAll para obter um único elemento DOM em vez do método querySelector.

Vamos dar uma olhada nas características deste erro. Suponha que tenos um parágrafo:

Um certo programador decidiu obter e alterar o texto deste parágrafo. Para fazer isso, ele obteve uma referência a este elemento em uma variável, usando erroneamente o método errado:

Em seguida, o programador tentou alterar o texto do parágrafo. No entanto, o texto do parágrafo não mudou:

Além disso, nenhum erro apareceu no console. O fato é que uma operação válida foi executada, mas não em um único elemento, e sim em um grupo. E ler ou alterar o texto de um grupo de elementos simplesmente não é possível - apenas iterando sobre eles com um loop e acessando cada elemento individualmente.

Como detectar o erro

Vamos ver como um programador deve agir para detectar este erro. Na verdade, com um pouco de experiência, é fácil detectá-lo pelas características típicas.

Suponha, no entanto, que isso não aconteceu. Então, a primeira ação do programador ao procurar por erros deve ser exibir os valores das variáveis no console. No seu caso, há apenas uma variável - elem. É necessário exibir o valor desta variável e ver o que está armazenado nela:

No console, fica imediatamente claro que a variável não contém um único elemento, mas sim um array. Isto dá imediatamente uma pista óbvia de que um erro foi cometido no método para obter o elemento.