path: root/files/ru/web/api/element/classlist/index.html

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

<h2 id="Описание">Описание</h2>

<p>Свойство<strong> <code>classList</code></strong> возвращает псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы элемента.</p>

<div class="note">
<p>У <strong>classList </strong>есть примитивная альтернатива - свойство <strong>className, </strong>которое содержит значение атрибута <strong>class</strong> элемента.</p>
</div>

<h2 id="Syntax" name="Syntax"> </h2>

<h2 id="Синтаксис">Синтаксис</h2>

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

<ul>
 <li>Результат - псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы узла<strong> elem</strong></li>
</ul>

<p> </p>

<h2 id="Методы">Методы</h2>

<p><strong>ClassList </strong>является геттером. Возвращаемый им объект имеет несколько методов:</p>

<dl>
 <dt>     add( String<strong> [,String] )</strong>    </dt>
 <dd>   Добавляет элементу указанные классы</dd>
 <dt><strong>     remove</strong>( String [,String]<strong> )</strong></dt>
 <dd><strong>    </strong>Удаляет у элемента указанные классы</dd>
 <dd><strong>item</strong> ( Number )<br>
     Результат аналогичен вызову <code><strong>сlassList[Number]</strong></code></dd>
 <dd><strong>toggle</strong> ( String [, Boolean])<br>
     Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.</dd>
 <dd>    Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.</dd>
 <dd><strong>contains</strong> ( String )<br>
     Проверяет, есть ли данный класс у элемента (вернет true или false)</dd>
</dl>

<div class="note">
<p>И, конечно же, у <strong>ClassList</strong> есть заветное свойство<strong> length</strong>, которое возвращает количество классов у элемента.</p>
</div>

<dl>
 <dt> </dt>
</dl>

<h2 id="Примеры">Примеры</h2>

<pre class="brush: js">&lt;div id="clock" class="example for you"&gt; &lt;/div&gt;
</pre>

<pre class="brush: js">var elem = document.querySelector("#clock")

//Выведем классы
console.log(elem.classList); //DOMTokenList ["example", "for", "you"]

//Добавим классы
elem.classList.add("ok", "understand");
console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"]

//Переключим классы
elem.classList.toggle("you");
elem.classList.toggle("he");
console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"]

//Проверим класс
console.log(elem.classList.contains("example")); //true
console.log(elem.classList.contains("lol")); //false

//И удалим классы
elem.classList.remove("example", "for", "understand", "he");
console.log(elem.classList); //DOMTokenList ["ok"]</pre>

<p dir="rtl"> </p>

<div class="warning">
<p>В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: <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="Полифил">Полифил</h2>

<pre class="brush:js">// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function() {
    // helpers
    var regExp = function(name) {
        return new RegExp('(^| )'+ name +'( |$)');
    };
    var forEach = function(list, fn, scope) {
        for (var i = 0; i &lt; list.length; i++) {
            fn.call(scope, list[i]);
        }
    };

    // class list object with basic methods
    function ClassList(element) {
        this.element = element;
    }

    ClassList.prototype = {
        add: function() {
            forEach(arguments, function(name) {
                if (!this.contains(name)) {
                    this.element.className += ' '+ name;
                }
            }, this);
        },
        remove: function() {
            forEach(arguments, function(name) {
                this.element.className =
                    this.element.className.replace(regExp(name), '');
            }, this);
        },
        toggle: function(name) {
            return this.contains(name)
                ? (this.remove(name), false) : (this.add(name), true);
        },
        contains: function(name) {
            return regExp(name).test(this.element.className);
        },
        // bonus..
        replace: function(oldName, newName) {
            this.remove(oldName), this.add(newName);
        }
    };

    // IE8/9, Safari
    if (!('classList' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'classList', {
            get: function() {
                return new ClassList(this);
            }
        });
    }

    // replace() support for others
    if (window.DOMTokenList &amp;&amp; DOMTokenList.prototype.replace == null) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();
</pre>

<p> </p>

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>

<p> </p>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Особенность</th>
   <th>Chrome</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>{{ CompatGeckoDesktop("1.9.2") }}</td>
   <td>10</td>
   <td>11.50</td>
   <td>5.1<br>
    {{Webkitbug("20709")}}</td>
  </tr>
  <tr>
   <td>toggle method's second argument</td>
   <td>24</td>
   <td>{{CompatGeckoDesktop("24")}}</td>
   <td><a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">not supported</a></td>
   <td>15</td>
   <td>yes<br>
    {{Webkitbug("99375")}}
    <p> </p>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Особенность</th>
   <th>Android</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><span style="line-height: 1.572;">{{CompatGeckoMobile("1.9.2")}}</span></td>
   <td>10</td>
   <td>11.10</td>
   <td>5.0</td>
  </tr>
  <tr>
   <td>toggle method's second argument</td>
   <td>?</td>
   <td>{{CompatGeckoMobile("24")}}</td>
   <td>?</td>
   <td>?</td>
   <td>?</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="sect1"> </h2>

<h2 id="Спецификация">Спецификация</h2>

<ul>
 <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist">http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist</a></li>
 <li><a href="https://dom.spec.whatwg.org/#interface-domtokenlist">https://dom.spec.whatwg.org/#interface-domtokenlist</a></li>
</ul>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li><a href="/en-US/docs/DOM/element.className" title="DOM/element.className">element.className</a></li>
</ul>