1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
---
title: Element.classList
slug: Web/API/Element/classList
tags:
- API
- DOM
- Elemento
- Propiedad
- Referencia
- Sólo-Lectura
translation_of: Web/API/Element/classList
---
<div>{{APIRef("DOM")}}</div>
<p>La propiedad de sólo lectura <code><strong>Element.classList</strong></code> devuelve una colección activa de <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList" title="The DOMTokenList interface represents a set of space-separated tokens. Such a set is returned by Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList. It is indexed beginning with 0 as with JavaScript Array objects. DOMTokenList is always case-sensitive."><code>DOMTokenList</code></a> de los atributos de clase del elemento.</p>
<p>Usar <code>classList</code> 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")}}.</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox">var <var>elementClasses</var> = elementNodeReference.classList;
</pre>
<p><em>elementClasses</em> es un <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> que representa el atributo clase de <em>elementNodeReference</em>. Si el atributo clase no está definido o está vacío, <em>elementClasses.length</em> devuelve 0. <code>element.classList</code> por sí mismo es de sólo lectura, aunque puede ser modificado usando los métodos<code> add()</code> y <code>remove()</code>.</p>
<h2 id="Métodos">Métodos</h2>
<dl>
<dt>add( String [, String] )</dt>
<dd>Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.</dd>
<dt>remove( String [, String] )</dt>
<dd>Elimina las clases indicadas.<br>
<strong>Nota:</strong> Eliminar una clase que no existe NO produce un error.</dd>
<dt><strong>item</strong>( Number )</dt>
<dd>Devuelve el valor de la clase por índice en la colección.</dd>
<dt><strong>toggle</strong>( String [, force] )</dt>
<dd>Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la <u>elimina</u> y devuelve <code>false</code>, si no, la <u>añade</u> y devuelve <code>true</code>.<br>
Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como <code>true</code>, se añade la clase indicada, y si se evalúa como <code>false</code>, la elimina.</dd>
<dt>contains( String )</dt>
<dd>Comprueba si la clase indicada existe en el atributo de clase del elemento.</dd>
<dt>replace( oldClass, newClass )</dt>
<dd>Reemplaza una clase existente por una nueva.</dd>
</dl>
<h2 id="Ejemplos">Ejemplos</h2>
<pre class="brush: js" dir="rtl">// 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");</pre>
<div class="note">
<p>Las versiones de Firefox anteriores a la 26 no implementan el uso de múltiples argumentos en los métodos add/remove/toggle. Vea <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p>
</div>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
<td>{{Spec2("HTML WHATWG")}}</td>
<td>Nota en la especificación de HTML relacionada con el atributo {{htmlattrxref("class")}}.</td>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td>Definición inicial</td>
</tr>
<tr>
<td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
<td>{{Spec2("DOM4")}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>8</td>
<td>12</td>
<td>{{CompatGeckoDesktop(1.9.2)}}</td>
<td>10<sup>[1]</sup></td>
<td>11.50</td>
<td>5.1</td>
</tr>
<tr>
<td>Segundo argumento del método <code>toggle()</code></td>
<td>24</td>
<td>12</td>
<td>{{CompatGeckoDesktop(24)}}</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<td>Múltiples argumentos para <code>add()</code> y <code>remove()</code></td>
<td>28</td>
<td>12</td>
<td>{{CompatGeckoDesktop(26)}}</td>
<td>{{CompatNo}}</td>
<td>15</td>
<td>7</td>
</tr>
<tr>
<td><code>replace()</code></td>
<td>61</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatGeckoDesktop("49")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>3.0</td>
<td>12</td>
<td>{{CompatGeckoMobile(1.9.2)}}</td>
<td>10<sup>[1]</sup></td>
<td>11.10</td>
<td>5.0</td>
</tr>
<tr>
<td>Segundo argumento del método <code>toggle()</code></td>
<td>4.4</td>
<td>12</td>
<td>{{CompatGeckoMobile(24)}}</td>
<td>{{CompatNo}}<sup>[2]</sup></td>
<td>{{CompatUnknown}}</td>
<td>7.0</td>
</tr>
<tr>
<td>Múltiples argumentos para <code>add()</code> y <code>remove()</code></td>
<td>4.4</td>
<td>12</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatUnknown}}</td>
<td>7.0</td>
</tr>
<tr>
<td><code>replace()</code></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatGeckoDesktop("49")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] No soportado para elementos SVG. Vea <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">un informe de Microsoft acerca de esto</a>.<br>
[2] Internet Explorer no lo implementa actualmente. Vea <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">un informe de Microsoft acerca de esto</a>.</p>
<h2 id="Vea_también">Vea también</h2>
<ul>
<li>{{domxref("element.className")}}</li>
<li>{{domxref("DOMTokenList")}};</li>
</ul>
|
