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:

js
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>
js
var span = document.querySelector("span");
var classes = span.classList;
span.classList.add("x");
span.textContent = 'span classList is "' + classes + '"';

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

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

Specification
DOM Standard
# interface-domtokenlist

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMTokenList
[Symbol.iterator]
add
Multiple parameters for add()
contains
entries
forEach
item
keys
length
remove
Multiple parameters for remove()
Removes duplicates
replace
return()'s value is a boolean, not void as it used to be.
supports
toString
toggle
force parameter
Trims whitespace
value
values

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

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

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