[Javascript] ClassName, SetAttribute ou classList.add - Programação web - Clube do Hardware
Javascript ClassName, SetAttribute ou classList.add
Por Paulo Künzel, 18 de dezembro de 2017 em Programação web
Paulo Künzel 0
Eu possuo uma lista JSON que cria diversos objetos de um blog e me deparei com as seguintes formas de adicionar classes aos objetos HTML que crio após carregar a lista: className, setAttribute e classList.add.
Obviamente eu estou dando preferência pelo classList.add ou até o className, mas descobri que o setAttribute possui uma performance comparavel ou até melhor que eles. Como essa definição da classe CSS ficaria dentro de o set privado, alguém tem alguma recomendação?
Após fazer pesquisar no site da MDN, W3chools e rodar testes no meu navegador e no measurethat, descobri algumas coisas interessantes sobre os 3 metodos. Como eles variam em velocidade e funcionalidade, montei um post para poder explicar como cheguei na minha resposta.. segue abaixo um resumo dela:
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:
1º lugar: className
2º lugar: setAttribute (exceto Edge)
3º lugar: classList
*Resultado em operações por segundo
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.
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
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.
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.
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.