DOMTokenList

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

Свойства

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

Методы

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

Примеры

В следующем простом примере мы извлекаем список классов установленных в элементе <p> как DOMTokenList используя Element.classList, добавляем класс используя DOMTokenList.add() (en-US), затем обновляем 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() (en-US)) автоматически обрезает все излишки 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' в этой спецификации.
Живой стандарт Начальное определение

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

BCD tables only load in the browser

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

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