Publicado em por Paulo Künzel

Diferença de className, classList e setAttribute

A linguagem JavaScript nos permite manipular elementos HTML de diversas formas e algumas vezes precisamos montar componentes “on the fly” pois eles dependem de atualizações vindas de fontes externas, ações do usuário ou que o banco de dados finalmente termine de processar algum calculo monstruoso que aquele cliente disse ser fundamental.

Quando isso acontece, precisamos trabalhar para criar elementos que além de uteis sejam bonitos e com isso vem as implementações de CSS. Agora você que a passou por isso pode ter se deparado com a possibilidade de usar os métodos

  • Classname
  • Classlist.add
  • Setattribute

A performance

Mas qual é o melhor? Vale a pena ter um método para definir classes e um para definir atributos? Tendo isso em vista, resolvi pesquisar para saber qual seria a melhor opção. Segundo o site https://measurethat.net/Benchmarks/Show/54/0/classname-vs-setattribute-vs-classlist, alguém já havia se perguntado o mesmo. Eles fizeram o seguinte teste que rodei no Chrome, Edge e Firefox:

<div id="foo"></div>

className

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.className = "bar";
}

setAttribute

var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.setAttribute("class", "bar");
}
classList
var element = document.getElementById("foo");
var i = 1000;
while (i--) {
    element.classList.add("bar");
}

Resultado em operações por segundo

Chrome

Firefox

Edge

Na prática

Mesmo sendo bem claro, o teste acima não é um absoluto, devemos levar em consideração outros fatores como manipulação, funcionalidades e boas práticas.

  1. className: Permite a manipulação das classes no formato string, nesse caso tendo uma string com todas as classes escritas dentro e permitindo a manipulação dos dados neste formato. Por ser uma funcionalidade antiga, é utilizado por diversos navegadores
  2. setAttribute: O set atribute simplesmente faz isso, define o valor dentro de um atributo. Existe o getAttribute que permite visualizar este valor, mas a manipulação é limitada a isso.
  3. classList: Coloca as classes dentro de uma lista para serem manipuladas de forma ordenada através de diversos métodos específicos. A nível de funcionalidade é a mais prática, mas além de ter uma performance inferior, não foi implementada em navegadores mais antigos.

Conclusão

Acredito que o className e o classList sejam os melhores candidatos. Se você precisa de performance e está apenas definindo e apagando classes, utilize o className. Agora se você tem um sistema que precisa procurar por classes dentro da tag ou adicionar apenas se não existe, poupe o esforço de criar uma lógica para isso e utilize o classList.

Deixe um comentário