Свойство classList — это удобный способ работы с классами элементов в DOM (Document Object Model). Оно предоставляет методы, которые позволяют добавлять, удалять, проверять и переключать классы элементов на веб-странице.

Чтобы использовать classList, нужно сначала получить ссылку на элемент в DOM. После этого можно работать с его классами через это свойство.

let element = document.querySelector('#myElement');
console.log(element.classList); 
// Выведет список классов элемента

Распространенные методы classlist

Метод .add добавляет один или несколько классов к элементу.

element.classList.add('new-class'); 
// Добавит класс 'new-class'

Метод .remove удаляет указанный класс.

element.classList.remove('old-class'); 
// Удалит класс 'old-class'

Метод .contains проверяет, существует ли у элемента указанный класс. Возвращает true или false.

console.log(element.classList.contains('active')); 
// true, если класс 'active' есть у элемента

Метод .item возвращает класс по указанному индексу в списке классов.

console.log(element.classList.item(0)); 
// Выведет первый класс элемента

С помощью свойства classList работать с классами элементов стало намного проще и удобнее. Оно даёт прямой доступ к методам для добавления, удаления и проверки классов, что позволяет избежать ошибок и упрощает код.