Como contar elementos na tela com JavaScript

Neste artigo você vai aprender a como contar elementos na tela com JavaScript, utilizando uma função que conta os elementos do DOM

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre os elementos e o DOM que o JavaScript pode acessar.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

O DOM, Document Object Model, é uma réplica do HTML porém que aceita funções de JavaScript

Podemos criar eventos para que sejam ativados por meio do HTML, mas na verdade vão executar código JavaScript

Partindo dessa premissa podemos contar com o DOM também para acessar os elementos do HTML

Contando assim todas as ocorrências de um determinado elemento que está aparecendo na tela para o usuário

Veja um exemplo prático:

var paragrafos = document.querySelectorAll("p");

console.log(paragrafos.length); // quantidade de parágrafos

Este código é divido em duas etapas, primeiramente selecionamos o elemento que queremos contar com o método querySelectorAll

Este método seleciona com base nos seletores de CSS, podemos inserir classes ou ids, neste exemplo utilizo a tag p

Depois exibimos o valor de lenght, esta propriedade mostra um número que é correspondente a quantidade dos elementos que foram encontrados pelo nosso seletor

Ou seja, a quantidade de elementos que queremos detectar, e assim resolvemos nosso problema

Conclusão

Neste artigo aprendemos a como contar elementos na tela com JavaScript

Utilizamos a função querySelectorAll para selecionar os elementos

Depois utilizamos a propriedade length para contar o número de elementos que foram retornados com base na nossa seleção

Como explicado anteriormente, querySelectorAll retorna vários elementos que correspondem a nossa seleção baseada num seletor de CSS

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube