DOMTokenList

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 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></p>

Теперь #"p");var classes = para.classList;para.classList.add("d");para.textContent = 'paragraph classList is "' + classes + '"';

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

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

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

html

<span></span>

var span = document.querySelector("span");var classes = span.classList;span.classList.add("x");span.textContent = 'span classList is "' + classes + '"';

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