1 files changed, 237 insertions, 0 deletions
diff --git a/files/ru/web/api/element/classlist/index.html b/files/ru/web/api/element/classlist/index.html
new file mode 100644
index 0000000000..2ad0ee938f
--- /dev/null
+++ b/files/ru/web/api/element/classlist/index.html
@@ -0,0 +1,237 @@
+---
+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" dir="rtl">&lt;div id="clock" class="example for you"&gt; &lt;/div&gt;
+</pre>
+
+<pre class="brush: js" dir="rtl">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>