JS об'єкт DOMTokenList
Об'єкт DOMTokenList
Об'єкт DOMTokenList - це інтерфейс, який представляє список рядкових токенів. Хоча цей об'єкт можна знайти в різних контекстах, найпоширенішим застосуванням є управління списком класів HTML-елементів за допомогою властивості classList.
Основи роботи з classList
classList є властивістю елементів DOM і дозволяє легко додавати, видаляти або перевіряти наявність певних класів у елементів.
Приклад 1:
let element = document.querySelector('.myElement');
element.classList.add('newClass');
У цьому прикладі ми додаємо клас 'newClass' до елемента з класом 'myElement'. Якщо цей клас вже існує у списку, то нічого не відбудеться.
Приклад 2:
element.classList.remove('oldClass');
Тут ми видаляємо клас 'oldClass' із елемента. Якщо такого класу не було - нічого не відбудеться.
Приклад 3:
if (element.classList.contains('checkClass')) {
console.log('Елемент має клас checkClass!');
}
Метод contains дозволяє перевірити наявність класу у елемента. Він повертає true або false.
Розширені можливості DOMTokenList
Об'єкт DOMTokenList не обмежується лише додаванням, видаленням або перевіркою класів. Він також пропонує ряд інших корисних методів.
Приклад 4: Застосування toggle
element.classList.toggle('toggleClass');
Метод toggle додає клас, якщо його немає, або видаляє його, якщо він є. Це особливо корисно для комутації станів, наприклад, для відображення або сховання елементів.
Приклад 5: Отримання кількості класів
let count = element.classList.length;
console.log(`Елемент має `{count} класи.`);
За допомогою властивості length можна визначити, скільки класів містить елемент.
Приклад 6: Перебір класів
element.classList.forEach(className => {
console.log(className);
});
Оскільки DOMTokenList є подібним до масиву, його можна перебирати за допомогою методу forEach.
| Нотатка: | З об'єктом |
| Нотатка: | Врахуйте, що |
| Порада: | Навіть якщо |
| Порада: | Будьте обережні з використанням методу |
Синтаксис
let classes = element.classList;
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
8 |
3.6 |
5.1 |
11.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
3 |
18 |
4 |
5 |
| Переглядач | ||
|---|---|---|
0.10.0 |
1.0 |
Приклади
У сучасних веб-додатках часто є можливість вибору між світлою та темною темами. За допомогою DOMTokenList можна легко перемикати між цими темами, додаючи або видаляючи відповідний клас у кореневого елемента сторінки.
Коли користувач натискає на кнопку, клас "dark-theme" додається або видаляється, залежно від поточного стану, що автоматично перемикає тему сторінки.
let bodyElement = document.body;
let themeButton = document.getElementById('toggleTheme');
themeButton.addEventListener('click', () => {
bodyElement.classList.toggle('dark-theme');
});
Спливаючі вікна (або модальні вікна) використовуються для відображення додаткової інформації або для отримання від користувача певної відповіді. За допомогою DOMTokenList можна контролювати видимість цих вікон.
Коли користувач натискає на кнопку для відкриття модального вікна, клас "visible" додається до елемента модалі, роблячи його видимим. Для закриття вікна клас видаляється.
let modal = document.querySelector('.modal');
let openModalBtn = document.querySelector('.open-modal');
let closeModalBtn = document.querySelector('.close-modal');
openModalBtn.addEventListener('click', () => {
modal.classList.add('visible');
});
closeModalBtn.addEventListener('click', () => {
modal.classList.remove('visible');
});Додавання анімацій до елементів при наведенні може покращити взаємодію користувача з інтерфейсом. За допомогою DOMTokenList можна додавати класи, що активують певні CSS-анімації.
У цьому прикладі, коли користувач наводить курсор на елемент, активується CSS-анімація масштабування завдяки додаванню класу "animate-scale". Після того як курсор виходить за межі елемента, анімація вимикається видаленням класу.
let animatedElement = document.querySelector('.animated-element');
animatedElement.addEventListener('mouseover', () => {
animatedElement.classList.add('animate-scale');
});
animatedElement.addEventListener('mouseout', () => {
animatedElement.classList.remove('animate-scale');
});