From 35deb4cbaff5c0889411dbdf778cf1f5a6e6896b Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Tue, 31 Oct 2023 22:23:11 +0300 Subject: [PATCH 1/2] [ru]: update docs/Web/API/Element/classList translation (#15920) --- files/ru/web/api/element/classlist/index.md | 151 +++++--------------- 1 file changed, 34 insertions(+), 117 deletions(-) diff --git a/files/ru/web/api/element/classlist/index.md b/files/ru/web/api/element/classlist/index.md index fccfaf102a9025..8a23b0c945878c 100644 --- a/files/ru/web/api/element/classlist/index.md +++ b/files/ru/web/api/element/classlist/index.md @@ -1,5 +1,5 @@ --- -title: Element.classList +title: "Element: свойство classList" slug: Web/API/Element/classList --- @@ -7,139 +7,54 @@ slug: Web/API/Element/classList ## Описание -Свойство **`classList`** возвращает псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы элемента. +**`Element.classList`** — это доступное только для чтения свойство, которое содержит текущую коллекцию {{domxref("DOMTokenList")}} всех атрибутов `class` элемента. -> **Примечание:** У **classList** есть примитивная альтернатива - свойство **className,** которое содержит значение атрибута **class** элемента. +Использование `classList` представляет более удобный способ, чем доступ к списку классов элемента в виде строки, разделенной пробелами, через {{domxref("element.className")}}. -## Синтаксис +## Значение -``` -var elementClasses = elem.classList; -``` - -- Результат - псевдомассив {{domxref("DOMTokenList")}}, содержащий все классы узла **elem** - -## Методы - -**ClassList** является геттером. Возвращаемый им объект имеет несколько методов: +{{domxref("DOMTokenList")}} представляет содержимое атрибута `class` элемента. Если атрибут `class` не установлен или пуст, то будет возвращён пустой `DOMTokenList`, то есть `DOMTokenList` со свойством `length` равным `0`. -- add(String \[,String]) - : - Добавляет элементу указанные классы -- remove(String \[,String]) - - : Удаляет у элемента указанные классы -- toggle (String \[,Boolean]) - - : Если заданный класс у элемента отсутствует, то он добавляется, если такой класс есть, то класс удаляется. Когда вторым параметром передаётся `false` указанный класс удаляется, при передаче `true` - добавляется. Если вторым аргументом переданётся `undefined` или переменная с `typeof == 'undefined'`, поведение будет аналогичным вызову `toggle` с одним аргументом. -- contains ( String ) - - : Проверяет, есть ли данный класс у элемента (вернёт true или false) +Хотя само свойство `classList` доступно только для чтения, можно изменять связанный с ним `DOMTokenList` с помощью методов {{domxref("DOMTokenList/add", "add()")}}, {{domxref("DOMTokenList/remove", "remove()")}}, {{domxref("DOMTokenList/replace", "replace()")}} и {{domxref("DOMTokenList/toggle", "toggle()")}}. -> **Примечание:** И, конечно же, у **ClassList** есть заветное свойство **length**, которое возвращает количество классов у элемента. +Для проверки, содержит ли элемент какой-либо класс можно использовать метод {{domxref("DOMTokenList/contains", "classList.contains()")}}. ## Примеры ```js -
- {" "} -
-``` +const div = document.createElement("div"); +div.className = "foo"; -```js -var elem = document.querySelector("#clock"); +// Начальное состояние:
+console.log(div.outerHTML); -//Выведем классы -console.log(elem.classList); //DOMTokenList ["example", "for", "you"] +// Используем classList API для удаления и добавления классов +div.classList.remove("foo"); +div.classList.add("anotherclass"); -//Добавим классы -elem.classList.add("ok", "understand"); -console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"] +//
+console.log(div.outerHTML); -//Переключим классы -elem.classList.toggle("you"); -elem.classList.toggle("he"); -console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"] +// Если класс "visible" присутствует в списке классов, то он будет удалён, а иначе наоборот добавлен +div.classList.toggle("visible"); -//Проверим класс -console.log(elem.classList.contains("example")); //true -console.log(elem.classList.contains("lol")); //false +// Добавление/удаление класса "visible" в зависимости от условия, передаваемого вторым аргументом +div.classList.toggle("visible", i < 10); -//И удалим классы -elem.classList.remove("example", "for", "understand", "he"); -console.log(elem.classList); //DOMTokenList ["ok"] -``` +// false +console.log(div.classList.contains("foo")); -> **Предупреждение:** В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: +// Добавление или удаление нескольких классов сразу +div.classList.add("foo", "bar", "baz"); +div.classList.remove("foo", "bar", "baz"); -## Полифил +// Добавление или удаление нескольких классов с использованием spread-синтаксиса +const cls = ["foo", "bar"]; +div.classList.add(...cls); +div.classList.remove(...cls); -```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 < 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 && DOMTokenList.prototype.replace == null) { - DOMTokenList.prototype.replace = ClassList.prototype.replace; - } -})(); +// Замена класса "foo" классом "bar" +div.classList.replace("foo", "bar"); ``` ## Спецификации @@ -152,4 +67,6 @@ console.log(elem.classList); //DOMTokenList ["ok"] ## Смотрите также -- [element.className](/ru/docs/DOM/element.className) +- {{domxref("element.className")}} +- {{domxref("DOMTokenList")}} +- [`classList.js`](https://github.com/eligrey/classList.js) (кросс-браузерный полифил, реализующий функциональность `element.classList`) From e53d9fbaeaa80c87f812f1620300df60b363ea13 Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 10 Dec 2023 19:59:56 +0300 Subject: [PATCH 2/2] [ru] add 'l10n.sourceCommit' to 'Web/API/Element/classList' --- files/ru/web/api/element/classlist/index.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/files/ru/web/api/element/classlist/index.md b/files/ru/web/api/element/classlist/index.md index 8a23b0c945878c..abadbca49833f4 100644 --- a/files/ru/web/api/element/classlist/index.md +++ b/files/ru/web/api/element/classlist/index.md @@ -1,6 +1,8 @@ --- title: "Element: свойство classList" slug: Web/API/Element/classList +l10n: + sourceCommit: 1b22d649b27f7b9359388cb57fc0075559e32584 --- {{APIRef("DOM")}}