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.

правити

Порада

Навіть якщо DOMTokenList схожий на масив, він не має багатьох методів масивів, таких як push або pop. Замість цього використовуйте специфічні методи, такі як add або remove.

автор: Bond правити

Порада

Будьте обережні з використанням методу toggle в критичних сценаріях. Якщо ви точно знаєте, що хочете додати або видалити клас, краще використовуйте add або remove.

автор: Bond правити

Нотатка

З об'єктом DOMTokenList робота стає простіше і інтуїтивно зрозуміліше, коли мова йде про управління класами DOM-елементів. Цей об'єкт - потужний інструмент в арсеналі кожного розробника.

автор: Bond правити

Нотатка

Врахуйте, що DOMTokenList є живим об'єктом. Це означає, що якщо ви зберігаєте посилання на classList і після цього змінюєте список класів елемента, зміни відобразяться у вашому збереженому об'єкті DOMTokenList.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

let classes = element.classList;

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	8	3.6	5.1	11.5	12

Підтримка: мобільні переглядачі

Переглядач
	3	18	4	5

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<div id="toggleTheme">Демонстраційний елемент</div>

let bodyElement = document.body;
let themeButton = document.getElementById('toggleTheme');

themeButton.addEventListener('click', () => {
    bodyElement.classList.toggle('dark-theme');
});

<div class="modal">перший елемент modal</div>
<div class="modal">другий елемент modal</div>
<div class="open-modal">перший елемент open-modal</div>
<div class="open-modal">другий елемент open-modal</div>
<div class="close-modal">перший елемент close-modal</div>
<div class="close-modal">другий елемент close-modal</div>

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');
});

<div class="animated-element">перший елемент animated-element</div>
<div class="animated-element">другий елемент animated-element</div>

let animatedElement = document.querySelector('.animated-element');

animatedElement.addEventListener('mouseover', () => {
    animatedElement.classList.add('animate-scale');
});

animatedElement.addEventListener('mouseout', () => {
    animatedElement.classList.remove('animate-scale');
});