DOMTokenList

Интерфейс DOMTokenList представляет собой набор разделительных токенов. Такой набор возвращается Element.classList или HTMLLinkElement.relList, и многие другие.

Индексирование DOMTokenList начинается с 0, как и в JavaScript Array объектов. DOMTokenList всегда чувствительна к регистру.

DOMTokenList.length Только для чтения

Число объектов, хранящихся в объекте.

DOMTokenList.value

Свойство строкового преобразования, возвращающее значение списка в виде строки.

DOMTokenList.item()

Возвращает элемент в списке по его индексу, или null если индекс больше или равен length списка.

DOMTokenList.contains()

Возвращает true если список содержит данный токен, в противном случае false.

DOMTokenList.add()

Добавляет указанные токены в список.

DOMTokenList.remove()

Удаляет указанные токены из списка.

DOMTokenList.replace()

Заменяет токен другим.

DOMTokenList.supports()

Возвращает true если данный токен находится в поддерживаемых токенах ассоциированного атрибута.

DOMTokenList.toggle()

Удаляет токен из списка, если он существует, или добавляет его в список, если его нет. Возвращает булево значение, указывающее, находится ли токен в списке после операции.

DOMTokenList.entries()

Возвращает итератор, позволяющий проходить по всем парам ключ/значение, содержащимся в этом объекте.

DOMTokenList.forEach()

Выполняет предоставленную функцию обратного вызова один раз для каждого DOMTokenList элемента.

DOMTokenList.keys()

Возвращает итератор, позволяющий проходить по всем ключам пар ключ/значение, содержащихся в этом объекте.

DOMTokenList.toString()

Возвращает DOMTokenList.value, значения списка, разделенные пробелами, в виде строки.

DOMTokenList.values()

Возвращает итератор, позволяющий проходить по всем значениям пар ключ/значение, содержащихся в этом объекте.

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

Сначала HTML:

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

Теперь JavaScript:

let para = document.querySelector("p");
let classes = para.classList;
para.classList.add("d");
para.textContent = `paragraph classList is "${classes}"`;

Вывод выглядит следующим образом:

Методы, изменяющие DOMTokenList (например, DOMTokenList.add()) автоматически обрезают избыточные пробелы и удаляют дубликаты из списка. Например:

<span class="    d   d e f"></span>

let span = document.querySelector("span");
let classes = span.classList;
span.classList.add("x");
span.textContent = `span classList is "${classes}"`;

Вывод выглядит следующим образом: