--- title: Element.classList slug: Web/API/Element/classList tags: - API - DOM - Elemento - Propiedad - Referencia - Sólo-Lectura translation_of: Web/API/Element/classList ---
{{APIRef("DOM")}}

La propiedad de sólo lectura Element.classList devuelve una colección activa de DOMTokenList de los atributos de clase del elemento.

Usar classList es una forma práctica de acceder a la lista de clases de un elemento como una cadena de texto delimitada por espacios a través de {{domxref("element.className")}}.

Sintaxis

var elementClasses = elementNodeReference.classList;

elementClasses es un DOMTokenList que representa el atributo clase de elementNodeReference. Si el atributo clase no está definido o está vacío, elementClasses.length devuelve 0. element.classList por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos add() y remove().

Métodos

add( String [, String] )
Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.
remove( String [, String] )
Elimina las clases indicadas.
Nota: Eliminar una clase que no existe NO produce un error.
item( Number )
Devuelve el valor de la clase por índice en la colección.
toggle( String [, force] )
Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la elimina y devuelve false, si no, la añade y devuelve true.
Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como true, se añade la clase indicada, y si se evalúa como false, la elimina.
contains( String )
Comprueba si la clase indicada existe en el atributo de clase del elemento.
replace( oldClass, newClass )
Reemplaza una clase existente por una nueva.

Ejemplos

// div es una referencia de objeto al elemento <div> con class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// si visible está presente la elimina, de lo contrario la añade
div.classList.toggle("visible");

// añadir/eliminar visible, dependiendo de la condición, i menor que 10
div.classList.toggle("visible", i < 10 );

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

// añadir o eliminar varias clases
div.classList.add("foo", "bar");
div.classList.remove("foo", "bar");

// reemplazar la clase "foo" por "bar"
div.classList.replace("foo", "bar");

Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea https://bugzilla.mozilla.org/show_bug.cgi?id=814014

Especificaciones

Especificación Estado Comentario
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}} {{Spec2("HTML WHATWG")}} Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}} {{Spec2("DOM WHATWG")}} Definición inicial
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}} {{Spec2("DOM4")}}  

Compatibilidad con navegadores

{{CompatibilityTable}}
Característica Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 8 12 {{CompatGeckoDesktop(1.9.2)}} 10[1] 11.50 5.1
Segundo argumento del método toggle() 24 12 {{CompatGeckoDesktop(24)}} {{CompatNo}}[2] 15 7
Múltiples argumentos para add() y remove() 28 12 {{CompatGeckoDesktop(26)}} {{CompatNo}} 15 7
replace() 61 {{CompatUnknown}} {{CompatGeckoDesktop("49")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Característica Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico 3.0 12 {{CompatGeckoMobile(1.9.2)}} 10[1] 11.10 5.0
Segundo argumento del método toggle() 4.4 12 {{CompatGeckoMobile(24)}} {{CompatNo}}[2] {{CompatUnknown}} 7.0
Múltiples argumentos para add() y remove() 4.4 12 {{CompatUnknown}} {{CompatNo}} {{CompatUnknown}} 7.0
replace() {{CompatNo}} {{CompatNo}} {{CompatGeckoDesktop("49")}} {{CompatNo}} {{CompatNo}} {{CompatNo}}

[1] No soportado para elementos SVG.  Vea un informe de Microsoft acerca de esto.
[2] Internet Explorer no lo implementa actualmente. Vea un informe de Microsoft acerca de esto.

Vea también