Объект DOMTokenList
DOMTokenList — это набор токенов, разделенных пробелами.
К DOMTokenList можно получить доступ по индексу (начинается с 0).
Свойство length возвращает количество токенов в DOMTokenList.
Примечание DOMTokenList
Свойство classList элемента HTML представляет собой DOMTokenList.
Свойства и методы DOMTokenList
| Имя | Описание |
|---|---|
| add() | Добавляет один или несколько токенов в список |
| contains() | Возвращает true, если список содержит класс |
| entries() | Возвращает итератор с парами ключ/значение из списка. |
| forEach() | Выполняет функцию обратного вызова для каждого токена в списке |
| item() | Возвращает токен по указанному индексу |
| keys() | Возвращает итератор с ключами в списке |
| length | Возвращает количество токенов в списке |
| remove() | Удаляет один или несколько токенов из списка |
| replace() | Заменяет токен в списке |
| supports() | Возвращает значение true, если токен является одним из поддерживаемых токенов атрибута. |
| toggle() | Переключение между токенами в списке |
| value | Возвращает список токенов в виде строки |
| values() | Возвращает итератор со значениями в списке |
Примеры DOMTokenList
Добавьте класс "myStyle" к элементу:
element.classList.add("myStyle");
Попробуйте сами »
Удалить класс "myStyle" из элемента:
element.classList.remove("myStyle");
Попробуйте сами »
Включение и выключение "myStyle":
element.classList.toggle("myStyle");
Попробуйте сами »
Ещё примеры ниже.
Не массив DOMTokenList
DOMTokenList — это не массив!
DOMTokenList может выглядеть как массив, но это не так.
Вы можете пройти по DOMTokenList и обратиться к его токену с помощью индекса.
Но вы не можете использовать методы массива, такие как push(), pop() или join(), в DOMTokenList.
Добавьте несколько классов к элементу:
element.classList.add("myStyle", "anotherClass", "thirdClass");
Попробуйте сами »
Удалить несколько классов из элемента:
element.classList.remove("myStyle", "anotherClass", "thirdClass");
Попробуйте сами »
Получить количество имен классов для элемента:
let numb = element.classList.length;
Попробуйте сами »
Получите имена классов элемента "myDIV":
<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Я myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;
Попробуйте сами »
Удалите "anotherClass", если элемент имеет класс "myStyle".
if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}
Попробуйте сами »
Переключайтесь между классами, чтобы создать раскрывающуюся кнопку:
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Попробуйте сами »
Создайте липкую панель навигации:
// Получить навигационную панель
const navbar = document.getElementById("navbar");
// Получить смещение позиции навигационной панели
const sticky = navbar.offsetTop;
// Добавьте класс sticky к панели навигации, когда достигнете ее позиции прокрутки.
// Удалите его, когда покинете позицию прокрутки.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
Попробуйте сами »