DOMTokenList

Вы читаете английскую версию этой статьи, так как пока нет перевода на данный язык. Помогите нам перевести эту статью!

DOMTokenList интерфейс представляет собой набор разделённых пробелами токенов. Такой набор возвращается от Element.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList, HTMLAreaElement.relList, HTMLIframeElement.sandbox, или HTMLOutputElement.htmlFor. Он в начале индексируется 0 как в объектах JavaScript.  DOMTokenList всегда чувствителен к регистру.

Свойства

DOMTokenList.length Только для чтения
- целое число, которое представляет собой число объектов хранящееся в объекте
DOMTokenList.value
Список значений  DOMString.

Методы

DOMTokenList.item()
Возвращает элемент из списка по индексу (возвращает undefined если число больше или равно длине списка).
DOMTokenList.contains()
Возвращает true если список содержит отданный токен, иначе false.
DOMTokenList.add()
Добавляет отданный токен в список.
DOMTokenList.remove()
Удаляет указанный токен из списка.
DOMTokenList.replace()
Заменяет существующий токен новым.
DOMTokenList.supports()
Возвращает true если отданный токен поддерживается токенами в связанном атрибуте
DOMTokenList.toggle()
Удаляет отданный токен из списка и возвращает false. Если токена не существует, то он добавляется и функция возвращает true.
DOMTokenList.entries()
Возвращает iterator позволяя пройтись по всем парам ключ/значение хранящимся в объекте.
DOMTokenList.forEach()
Выполняет предусмотренную функцию к каждому элементу DOMTokenList.
DOMTokenList.keys()
Возвращает iterator позволяя пройтись по всем ключам всех пар ключ/значение, хранящихся в объекте.
DOMTokenList.values()
Возвращает iterator позволяя пройтись по всем значениям пар ключ/значение, хранящихся в объектах.

Примеры

В следующем простом примере мы извлекаем список классов установленных в элементе <p> как DOMTokenList используя Element.classList, добавляем класс используя DOMTokenList.add(), затем обновляем Node.textContent в элементе <p> чтобы уравнять с DOMTokenList.

Сперва HTML:

<p class="a b c"></p>

Теперь JavaScript:

var para = document.querySelector("p");
var classes = para.classList;
para.classList.add("d");
para.textContent = 'paragraph classList is "' + classes + '"';

Результат выглядит так:

Обрезка пробелов и удаление дупликатов

Метод, который модифицирует DOMTokenList (как DOMTokenList.add()) автоматически обрезает все излишки Whitespace и удаляет значения дупликатов из списка. Пример: 

<span class="    d   d e f"></span>
var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span classList is "' + classes + '"';

Результат выглядит так:

Характеристики

Характеристики Статус Комментарий
DOM
Определение 'DOMTokenList' в этой спецификации.
Живой стандарт Начальное определение

Совместимость браузера

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
DOMTokenListChrome Полная поддержка 1Edge Полная поддержка ДаFirefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
addChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
containsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
entriesChrome Полная поддержка 45Edge ? Firefox Полная поддержка 50IE ? Opera Полная поддержка 32Safari Полная поддержка 10WebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 50Opera Android Полная поддержка 32Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка Да
forEachChrome Полная поддержка 45Edge Полная поддержка 16Firefox Полная поддержка 50IE Нет поддержки НетOpera Полная поддержка 32Safari Полная поддержка 10WebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 50Opera Android Полная поддержка 32Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка Да
itemChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
keysChrome Полная поддержка 45Edge ? Firefox Полная поддержка 50IE ? Opera Полная поддержка 32Safari Полная поддержка 10WebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 50Opera Android Полная поддержка 32Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка Да
lengthChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 50IE ? Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 50Opera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
removeChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 10Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
Trimming of whitespace and removal of duplicatesChrome Полная поддержка ДаEdge ? Firefox Полная поддержка 55IE Полная поддержка Да
Замечания
Полная поддержка Да
Замечания
Замечания IE only trims whitespace - it doesn't remove duplicates.
Opera Полная поддержка ДаSafari Полная поддержка 10WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка 55Opera Android Полная поддержка ДаSafari iOS Полная поддержка 10Samsung Internet Android Полная поддержка Да
replaceChrome Полная поддержка 61Edge Полная поддержка 17Firefox Полная поддержка 49IE ? Opera Полная поддержка 48Safari Полная поддержка 10.1WebView Android Полная поддержка 61Chrome Android Полная поддержка 61Firefox Android Полная поддержка 49Opera Android Полная поддержка 45Safari iOS Полная поддержка 10.3Samsung Internet Android Нет поддержки Нет
supports
Экспериментальная
Chrome Полная поддержка 49Edge Полная поддержка 17Firefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка 36Safari Полная поддержка 10WebView Android Полная поддержка 49Chrome Android Полная поддержка 49Firefox Android Полная поддержка 49Opera Android Полная поддержка 36Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка 5.0
toggleChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка ДаIE Полная поддержка 11Opera Полная поддержка ДаSafari Полная поддержка 5.1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаFirefox Android Полная поддержка ДаOpera Android Полная поддержка ДаSafari iOS Полная поддержка 5.1Samsung Internet Android Полная поддержка Да
valueChrome Полная поддержка 50
Замечания
Полная поддержка 50
Замечания
Замечания Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Edge Полная поддержка ДаFirefox Полная поддержка ДаIE ? Opera Полная поддержка 37
Замечания
Полная поддержка 37
Замечания
Замечания Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari Полная поддержка 10WebView Android Полная поддержка 50
Замечания
Полная поддержка 50
Замечания
Замечания Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Chrome Android Полная поддержка 50
Замечания
Полная поддержка 50
Замечания
Замечания Before Chrome 50, this property was part of the deprecated child DOMSettableTokenList interface.
Firefox Android Полная поддержка ДаOpera Android Полная поддержка 37
Замечания
Полная поддержка 37
Замечания
Замечания Before Opera 37, this property was part of the deprecated child DOMSettableTokenList interface.
Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка Да
valuesChrome Полная поддержка 45Edge ? Firefox Полная поддержка 50IE ? Opera Полная поддержка 32Safari Полная поддержка 10WebView Android Полная поддержка 45Chrome Android Полная поддержка 45Firefox Android Полная поддержка 50Opera Android Полная поддержка 32Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Смотрите замечания реализации.
Смотрите замечания реализации.

Смотрите также:

  • DOMSettableTokenList (объект который расширяет DOMTokenList с установленным .value параметром)