Руководство по HTML DOMTokenList

DOMTokenList

DOMTokenList Это набор токенов, разделенных пробелами.

DOMTokenList можно получить через индекс (начиная с 0).

Свойство lengthВозвращает количество токенов в DOMTokenList.

Примечание:Элемента HTML Свойство classListПредставляет DOMTokenList.

Свойства и методы DOMTokenList

Название Описание
add() Добавляет один или несколько токенов в список.
contains() Возвращает true, если список содержит класс.
entries() Возвращает итератор с парой ключ/значение из списка.
forEach() Выполнить回调-функцию для каждого токена в списке.
item() Вернуть токен по заданному индексу.
keys() Вернуть итератор с ключами из списка.
length Вернуть количество токенов в списке.
remove() Удалить один или несколько токенов из списка.
replace() Заменить токены в списке.
supports() Вернуть true, если токен является одним из поддерживаемых свойств.
toggle() Переключать между токенами в списке.
value Вернуть список токенов в виде строки.
values() Вернуть итератор с значениями из списка.

Инстанция

Пример 1

Добавление класса "myStyle" к элементу:

element.classList.add("myStyle");

Попробуйте сами

Пример 2

Удаление класса "myStyle" из элемента:

element.classList.remove("myStyle");

Попробуйте сами

Пример 3

Включение и отключение "myStyle":

element.classList.toggle("myStyle");

Попробуйте сами

Ниже на странице предоставлены дополнительные примеры.

Не массив

DOMTokenList не массив!

DOMTokenList может выглядеть как массив, но на самом деле это не так.

Вы можете итерировать DOMTokenList и использовать индекс для ссылки на его токены.

Но вы не можете использовать методы массива на DOMTokenList, такие как push(), pop() или join().

Инстанция

Пример 1

Добавление нескольких классов к элементу:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Попробуйте сами

Пример 2

Удаление нескольких классов из элемента:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Попробуйте сами

Пример 3

Получение количества классов элемента:

let numb = element.classList.length;

Попробуйте сами

Пример 4

Получение класса элемента "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>I am myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Попробуйте сами

Пример 5

Получить первый класс элемента:

let className = element.classList.item(0);

Попробуйте сами

Пример 6

Имеет ли элемент класс "myStyle"?

let x = element.classList.contains("myStyle");

Попробуйте сами

Пример 7

Если у элемента есть класс "myStyle", то удалите "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Попробуйте сами

Пример 8

Переключение между классами для создания кнопки выпадающего списка:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Попробуйте сами

Пример 9

Создание sticky навигационной панели:

// Получить навигационную панель
const navbar = document.getElementById("navbar");
// Получить положение прокрутки навигационной панели
const sticky = navbar.offsetTop;
// Добавить класс sticky к навигационной панели, когда вы достигаете его положения прокрутки
// Удалить его, когда вы покидаете положение прокрутки
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Попробуйте сами