initial commit

1 files changed, 215 insertions, 0 deletions

diff --git a/files/es/web/api/element/classlist/index.html b/files/es/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..4d45dd2e31
--- /dev/null
+++ b/files/es/web/api/element/classlist/index.html
@@ -0,0 +1,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 &lt;div&gt; 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 &lt; 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>