DOMTokenList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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:

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 и удаляет значения дубликатов из списка. Пример:

html

<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 + '"';

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

Спецификации

Specification
DOM Standard # interface-domtokenlist

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

BCD tables only load in the browser

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

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