Manipulando classes com classList API


Manipular classes de CSS em elementos HTML é uma tarefa muito útil, e até corriqueira, para quem trabalha com JavaScript. Provavelmente, você já sabe como fazer isso com jQuery. Porém, o que nem todos sabem ainda, é que temos uma API nativa de JavaScript para executar essas tarefas.

Neste artigo vou lhe apresentar a classList API. Essa API é bem simples de ser utilizada, e é extremamente útil para diversas "brincadeiras".

Se você ainda não a conhece, verá que não é nada complicado manipular elementos dessa forma, mesmo sem utilizar bibliotecas como jQuery. Por outro lado, se você é um desenvolvedor experiente que já utiliza essa API no dia a dia, fique a vontade para deixar críticas e sugestões através dos comentários.

Entendendo a API

Todo objeto Element possui um objeto classList que retorna um DOMTokenList representando seu atributo class definido no documento HTML. O objeto classList possui uma propriedade length e é somente para leitura, porém podemos modificá-lo através de seus métodos, como add e remove. É aí que as coisas ficam interessantes.

Os métodos disponíveis em classList são:

  • add
  • remove
  • toggle
  • contains

Vamos considerar agora cada um desses métodos.

Adicionando classes com classList.add

Para adicionar uma ou mais classes em um elemento HTML, basta selecioná-lo e chamar o método classList.add, passando uma String como argumento. É interessante notar que podemos adicionar multiplas classes de uma só vez. Para isso, informe os nomes das classes que deseja adicionar separados por vírgula. Exemplo:

// Selecionamos um elemento span no DOM:
var mySpan = document.querySelector( 'span' );

// Agora adicionamos a classe highlight para destaca-lo:
mySpan.classList.add( 'highlight' );

// Agora adicionamos mais 3 classes de uma so vez:
mySpan.classList.add( 'feature', 'label', 'label-primary' );

Removendo classes com classList.remove

Além de adicionar novas classes, vez por outra você vai precisar também remover classes já existentes. Para isso, temos o método classList.remove. Vale notar, que assim como o método add, podemos remover multiplas classes de uma só vez. Exemplo:

// Selecionamos um elemento div no DOM:
var myDiv = document.querySelector( 'div' );

// Supondo que esse div tenha a classe 'foo', 'bar' e 'baz',
// vamos remover a classe 'baz':
myDiv.classList.remove( 'baz' );

// Agora vamos remover as classes 'foo' e 'bar' ao mesmo tempo:
myDiv.classList.remove( 'foo', 'bar' );

Alternando classes com classList.toggle

Para dar um comportamento mais dinâmico em nossa interface, pode ser interessante alternar (inserir e remover) uma classe, respondendo a um clique, toque na tela ou outro evento. Com isso, podemos fazer coisas como por exemplo exibir/ocultar um bloco de conteúdo, exibir/ocultar um menu, destacar/remover destaque de um elemento, entre várias outras coisas.

É aí que o método toggle entra em ação. Passamos o nome de uma classe para o método toggle, e ele fica responsável por checar se um elemento tem ou não essa classe. Se já tiver: ele remove, se não tiver: ele adiciona. Tudo "automagicamente" sem precisar escrever instruções if/else, expressões regulares ou coisa do tipo.

Para ver o método toggle funcionando, o ideal é registrarmos uma rotina de tratamento de eventos como comentei acima. No final do artigo, você encontra um exemplo assim. Mas a sintaxe desse método é a seguinte:

// Alterna a classe 'is-visible' no elemento 'myDiv':
myDiv.classList.toggle( 'is-visible' );

Verificando classes com classList.contains

Talvez você precise checar se um elemento possui determinada classe e dependendo do resultado, executar uma ou outra tarefa. Se esse for o caso, utilize o método classList.contains. Exemplo:

if( myDiv.classList.contains( 'is-visible' ) ) {
    // Se o elemento 'myDiv' possui a classe 'is-visible':
    // Faca alguma coisa interessante aqui.
} else {
    // Se nao...
    // Faca alguma outra coisa aqui.
}

Exemplo dinâmico

Para que você possa visualizar melhor as coisas, fiz um exemplo bem simples onde você pode interagir com a classList API clicando nos botões. Ao testar o botão contains, repare a saída gerada no console.

classList API

Compatibilidade nos browsers

Ao aplicarmos a classList API (ou qualquer outro recurso) em nossos projetos, é sempre bom ficar atento em relação a quais browsers suportam ou não tal API ou recurso que queremos implementar, e então tomar as decisões corretas.

Para isso, gosto bastante do site Can I use.

Como podemos ver na tabela abaixo, o suporte à classList API é bem tranquilo em vários navegadores. Para variar um pouco, no IE só funciona a partir da versão 10+. Mas isso não é nenhuma surpresa né? :-P.

Can I Use classList API

Mas fique tranquilo. Qualquer browser moderno aceita essa API, e se você precisa dar suporte aos navegadores mais antigos, pode usar algum polyfill disponível na Internet. Um deles você encontra na documentação da Mozilla Developer Network.

Conclusão

Agora você já sabe como manipular classes em seus documentos HTML de maneira muito fácil e sem depender de bibliotecas de terceiros. O suporte à essa API é muito bom em todos os browsers modernos e podemos utilizar um polyfill para os que não oferecem suporte. API's nativas podem facilitar bastante nossa vida como desenvolvedores Web, basta conhece-las e colocar em prática.

Referências: