Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

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 робота стає простіше і інтуїтивно зрозуміліше, коли мова йде про управління класами DOM-елементів. Цей об'єкт - потужний інструмент в арсеналі кожного розробника.

Нотатка:

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

Порада:

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

Порада:

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

Синтаксис

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

Методи

item()
Повертає елемент DOMTokenList за заданим індексом.
values()
Повертає значення усіх токенів.
keys()
Повертає новий ітератор, що містить ключі для кожного індексу в об'єкті DOMTokenList
add()
Додає клас до елементу DOM.
remove()
Видаляє один або кілька класів з елемента DOM.
contains()
Перевіряє наявність класу у елементі DOM.
replace()
Заміщує один існуючий токен іншим у списку класів.
entries()
Повертає ітератор, що містить всі пари індекс-значення для кожного елемента.
supports()
Перевіряє, чи підтримує дана реалізація конкретний токен.
forEach()
Перебирає елементи DOMTokenList.
toggle()
Перемикає наявність або відсутність класу.

Властивості

length
Вказує кількість токенів у DOMTokenList.
value
Містить значення токенів.