---
title: Element.classList
slug: Web/API/Element/classList
translation_of: Web/API/Element/classList
---
<div>{{APIRef("DOM")}}</div>

<p>O <strong>E</strong><strong>lement.classList</strong> é uma propriedade somente leitura que retorna uma coleção {{domxref ("DOMTokenList")}} ativa dos atributos de classe do elemento.</p>

<p>Usar <strong>classList</strong> é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de {{domxref ("element.className")}}.</p>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList;
</pre>

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

<h2 id="Métodos">Métodos</h2>

<dl>
 <dt>add( String [, String] )</dt>
 <dd>Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.</dd>
 <dt>remove( String [,String] )</dt>
 <dd>Remover valores de classe específicos.</dd>
 <dt><strong>item</strong> ( Number )</dt>
 <dd>Retorna o valor da classe por índice na coleção.</dd>
 <dt><strong>toggle</strong> ( String [, force] )</dt>
 <dd>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.<br>
 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.</dd>
 <dt>contains( String )</dt>
 <dd>Verifica se o valor da classe especificado existe no atributo de classe do elemento.</dd>
</dl>

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: js" dir="rtl">// div é uma referência de objeto para um elemento &lt;div&gt; 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 &lt; 10 );

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

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

<div class="note">
<p>As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja <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="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificações</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Observe dentro da especificação HTML relacionada ao {{htmlattrxref("class")}} attribute.</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM WHATWG")}}</td>
   <td>Definição inicial</td>
  </tr>
  <tr>
   <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td>
   <td>{{Spec2("DOM4")}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</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>Basic support</td>
   <td>8.0</td>
   <td>{{CompatVersionUnknown}}<sup>[3]</sup></td>
   <td>{{CompatGeckoDesktop("1.9.2")}}</td>
   <td>10<sup>[1][3]</sup></td>
   <td>11.50</td>
   <td>5.1</td>
  </tr>
  <tr>
   <td>toggle method's second argument</td>
   <td>24</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("24")}}</td>
   <td>{{CompatNo}}<sup>[2]</sup></td>
   <td>15</td>
   <td>5.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>3.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>10</td>
   <td>11.10</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td>toggle method's second argument</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("24")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Não suportado para elementos SVG. Veja <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">a report at Microsoft about that</a>.<br>
 [2] O Internet Explorer nunca implementou isso. Veja <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">a report at Microsoft about that</a>.<br>
 [3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".</p>

<p> </p>

<p> </p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li>{{domxref("element.className")}}</li>
 <li>{{domxref("DOMTokenList")}};</li>
</ul>