Element.classList

O Element.classList é uma propriedade somente leitura que retorna uma coleção DOMTokenList (en-US) ativa dos atributos de classe do elemento.

Usar classList é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de element.className.

Sintaxe

const elementClasses = elementNodeReference.classList;

elementClasses é um DOMTokenList que representa o atributo de classe de elementNodeReference. Se o atributo de classe não foi definido ou está vazio elementClasses.length retorna 0. element.classList propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos add () e remove ().

Métodos

add( String [, String] ): Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.
remove( String [,String] ): Remover valores de classe específicos.
item ( Number ): Retorna o valor da classe por índice na coleção.
toggle ( String [, force] ): Quando apenas um argumento está presente: Toggle class value; Ou seja, se a classe existir, em seguida, removê-lo e retornar false, se não, então adicioná-lo e retornar true.
Quando um segundo argumento está presente: Se o segundo argumento é avaliado como true, adicione o valor especificado da classe e, se ele for avaliado como false, remova-o.
contains( String ): Verifica se o valor da classe especificado existe no atributo de classe do elemento.

Exemplos

// div é uma referência de objeto para um elemento <div> com class = "foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// Se estiver visível, remova-o, caso contrário, adicione-o
div.classList.toggle("visible");

// adicionar/remover, dependendo do teste condicional, i menos de 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

// adicionar ou remover várias classes
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja https://bugzilla.mozilla.org/show_bug.cgi?id=814014

Especificações

Especificações	Status	Comentário
HTML Living Standard The definition of 'Element.classList' in that specification.	Padrão em tempo real	Observe dentro da especificação HTML relacionada ao `class` attribute.
DOM The definition of 'Element.classList' in that specification.	Padrão em tempo real	Definição inicial
DOM4 The definition of 'Element.classList' in that specification.	Obsoleto

Compatibilidade com navegadores

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Desktop
Dispositivo móvel

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	8.0	(Yes)^[3]	3.6 (1.9.2)	10^[1][3]	11.50	5.1
toggle method's second argument	24	(Yes)	24 (24)	Não suportado^[2]	15	5.1

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	3.0	(Yes)	1.0 (1.9.2)	10	11.10	5.0
toggle method's second argument	?	?	24.0 (24)	?	?	?

[1] Não suportado para elementos SVG. Veja a report at Microsoft about that.
[2] O Internet Explorer nunca implementou isso. Veja a report at Microsoft about that.
[3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".