10.01.2025

Como Verificar a Presença de uma Classe em um Elemento Usando JavaScript

Resposta Rápida

Para verificar a presença de uma classe em um elemento usando JavaScript, você pode usar o método classList.contains:

if (element.classList.contains('minha-classe')) {
  // 🎉 Classe está presente, vamos comemorar!
}

Suporte para Navegadores Antigos: Saudações aos Velhos Amigos!

Se você precisa oferecer suporte a navegadores antigos que não suportam o classList, você pode recorrer a soluções alternativas. Por exemplo, você pode escrever uma função auxiliar usando a propriedade className e o método indexOf:

function temClasse(elemento, nomeClasse) {
  return (' ' + elemento.className + ' ').indexOf(' ' + nomeClasse + ' ') > -1;
}

if (temClasse(element, 'classe-amada-antiga')) {
  // 🦖 Ótimo, encontramos vestígios de dinossauros!
}

Essa abordagem garante máxima compatibilidade com várias versões de navegadores.

Verificando Múltiplas Classes: Quanto Mais, Melhor!

Se a tarefa é verificar a presença de múltiplas classes, usar um loop for em combinação com o método classList.contains é uma excelente escolha:

var classesParaVerificar = ['classe1', 'classe2', 'classe3'];
for (var i = 0; i < classesParaVerificar.length; i++) {
  if (element.classList.contains(classesParaVerificar[i])) {
    // 👑 Pelo menos uma classe encontrada! Hora de desfrutar de seu status de nobreza!
    break;
  }
}

A simplicidade dessa abordagem e sua eficiência irão te satisfazer.

Seletores Complexos: Liberte o Poder do matches

Para verificar se um elemento corresponde a seletores, incluindo classes, o método Element.matches() é muito útil:

if (element.matches('.classe-chique')) {
  // 💃 O elemento e a classe '.classe-chique' parecem um par perfeito!
}

Esse método é sua arma secreta para trabalhar com seletores complexos quando um elemento possui múltiplas classes.

Medindo o Desempenho: A Necessidade de Velocidade

Heróis em filmes de corrida dizem: "Não importa por quanto você ganhou, o que conta é vencer." Mas no mundo da programação, cada milissegundo conta. Compare classList.contains e indexOf:

• Teste de Estresse: https://jsben.ch/U3CpX
• Gráfico de Vitórias: https://i.stack.imgur.com/8kWMd.png

Lembre-se: até a velocidade da Lightning McQueen varia de pista para pista.

Polyfills: Nostalgia do classList

Para oferecer suporte a navegadores antigos, um polyfill pode fornecer a eles as capacidades do classList, modernizadas para nossos tempos:

// De volta para o futuro com classList
if (!("classList" in document.createElement("_"))) {
  Object.defineProperty(HTMLElement.prototype, 'classList', {
    // Seu código irá aqui...
  });
}

Explore os detalhes — polyfill classList.js de Eli Grey para uma compreensão completa.

Visualização

Vamos visualizar como um elemento contém uma classe em JavaScript imaginando um armário cheio de suas melhores roupas:

Armário	Roupa Presente?
Camisas Casuais	👔 🎩 🕶️
Vestidos de Festa	👗 🥾 🎒
Roupas de Esporte	🏋️ 👟 🧦
Roupa Estilosa	❓

const roupaExiste = element.classList.contains('roupa-estilosa');

Procurando por "Roupa Estilosa":

Verificação	Resultado
roupaExiste	✅ / ❌

👗 Sim (✅): Você está em uma roupa fabulosa! 🚫 Não (❌): Hora de atualizar seu guarda-roupa!

Sem Falsos Positivos

Ao usar classList.contains, minimizamos o risco de falsos positivos, que podem surgir ao usar indexOf. Não confunda classes como .btn e .btn-grande — elas são diferentes, assim como as nuances do seu código!

Considerações Especiais para SVG

Ao trabalhar com elementos SVG, o classList se torna um aliado confiável. No caso de SVG, a propriedade className pode não funcionar como esperado, especialmente em navegadores antigos.

Trabalhando com Classes em Frameworks Populares

Usuários de React, Angular e Vue devem notar que esses frameworks oferecem suas soluções para trabalhar com classes. Suas abordagens integradas são melhor adaptadas para implementações do DOM virtual, portanto, é recomendável usá-las.

Recursos Úteis

1. Propriedade Element: classList - Web API | MDN
2. Verificar a Presença de Classe em um Elemento - Stack Overflow
3. Fundamentos da Sintaxe de Classe - JavaScript.info
4. Método DOMTokenList: contains() - Web API | MDN
5. API de Classe HTML5 - David Walsh Blog
6. O Método .hasClass() | Documentação da API jQuery

Video

Navigation