Свойство classList

classList - это удобное свойство DOM, которое предоставляет доступ к управлению классами элемента через объект DOMTokenList. Это свойство позволяет не только просматривать текущие классы элемента, но и динамически добавлять, удалять или изменять их, улучшая интерактивность ваших веб-страниц.

  let element = document.getElementById("myElement");

  console.log(element.classList); // Выведет текущий список классов element

Это свойство включает в себя несколько методов, которые делают работу с классами элементов более интуитивно понятной и легкой:

classList.add() - добавляет один или несколько классов к элементу.

classList.remove() - удаляет один или несколько классов из элемента.

classList.replace() - заменяет один класс на другой.

classList.toggle() - добавляет класс, если его нет, и удаляет, если он уже есть.

classList.contains() - проверяет наличие класса у элемента.

Рассмотрим подробно методы свойства classList

classList.add()

Метод add() позволяет добавлять новые классы к элементу, что может быть полезно для изменения стиля элемента на лету. Метод поддерживает добавление нескольких классов за один вызов, делая процесс модификации элемента более эффективным и удобным.

  element.classList.add("new-class");
  // Добавляет класс 'new-class' к element
  
  element.classList.add("new-class", "another-class");
  // добавляет классы 'new-class' и 'another-class' к element    

classList.remove()

Метод remove() удаляет один или несколько указанных классов, что помогает контролировать визуальное представление элементов. Метод поддерживает удаление нескольких классов за один вызов.

  element.classList.remove("old-class");
  // Удаляет класс 'old-class' из element
  
  element.classList.remove("old-class", "another-old-class");
  // удаляет классы 'old-class' и 'another-old-class' из element    

classList.replace()

replace() заменяет существующий класс новым, облегчая обновление стилей без необходимости последовательного удаления и добавления классов.

  element.classList.replace("old-class", "new-class");
  // Заменяет old-class на new-class    

classList.toggle()

Метод toggle() играет ключевую роль в переключении классов, автоматически добавляя или удаляя их в зависимости от текущего состояния элемента. Этот метод также поддерживает дополнительный параметр, который определяет, должен ли класс быть добавлен или удален, независимо от его текущего состояния.

  element.classList.toggle("toggle-class");
  // Добавляет или удаляет 'toggle-class', в зависимости от его наличия
  
  element.classList.toggle("toggle-class", condition);
  // Добавляет 'toggle-class', если condition истинно, и удаляет, если ложно    

classList.contains()

contains() выполняет проверку наличия определённого класса, что позволяет условно применять стили или выполнять определённые действия.

  if(element.classList.contains("some-class")) {
    console.log("element содержит класс some-class");
  }    

Длина classList

Свойство length объекта classList предоставляет информацию о количестве классов, присвоенных HTML элементу. Это свойство позволяет разработчикам узнавать точное число классов, ассоциированных с элементом, что может быть полезно при диагностике или в процессе манипуляции классами.

  let element = document.getElementById("myElement");
  console.log(element.classList.length); // Выведет количество классов, присвоенных element    

Итого

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