Element.classList

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Element.classList даёт возможность просматривать и манипулировать классами элемента.

Пример

Секция статьи "Пример"
        
          
          const button = document.querySelector("button")button.classList.add("active") // добавили классbutton.classList.remove("active") // удалили классbutton.classList.contains("active") // вернет false, т.к. класса у элемента нет
          const button = document.querySelector("button")

button.classList.add("active") // добавили класс
button.classList.remove("active") // удалили класс
button.classList.contains("active") // вернет false, т.к. класса у элемента нет

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Секция статьи "Как понять"

Управлять классами элемента — одна из распространённых задач, потому браузеры предоставляют встроенные средства для решения такой задачи. Element.classList — это специальный объект, который хранит информацию о текущих классах элемента и содержит методы для работы с ними.

        
          
          const button = document.querySelector("button")button.classList.add("active")button.classList[0] // 'active'
          const button = document.querySelector("button")

button.classList.add("active")
button.classList[0] // 'active'

        
        
          
        
      

Как пишется

Секция статьи "Как пишется"

У Element.classList есть множество методов, но мы рассмотрим только часто используемые.

Element.classList.add

Секция статьи "Element.classList.add"

Этот метод используется для добавления класса к элементу. В качестве аргументов нужно передавать строку с именем класса.

        
          
          const element = document.querySelector("div")// Добавится класс animateelement.classList.add("animate")
          const element = document.querySelector("div")

// Добавится класс animate
element.classList.add("animate")

        
        
          
        
      

Можно так же передать несколько строк-аргументов, тогда добавится несколько классов:

        
          
          const element = document.querySelector("div")// Добавятся классы black, fade и animateelement.classList.add("black", "fade", "animate")
          const element = document.querySelector("div")

// Добавятся классы black, fade и animate
element.classList.add("black", "fade", "animate")

        
        
          
        
      
        
          
          // Находим блок, у которого уже есть класс headerconst element = document.querySelector("div.header")// Добавится только animate, т.к. header уже есть на элементеelement.classList.add("header", "animate")
          // Находим блок, у которого уже есть класс header
const element = document.querySelector("div.header")

// Добавится только animate, т.к. header уже есть на элементе
element.classList.add("header", "animate")

        
        
          
        
      

Element.classList.remove

Секция статьи "Element.classList.remove"

Метод используется для удаления класса у элемента. В качестве аргумента нужно передавать строку с именем класса.

        
          
          // На кнопке есть класс submit, предположим что он единственныйconst button = document.querySelector("button.submit")// Убираем классbutton.classList.remove("submit")button.classList[0] // undefined т.к. класса больше нет
          // На кнопке есть класс submit, предположим что он единственный
const button = document.querySelector("button.submit")

// Убираем класс
button.classList.remove("submit")
button.classList[0] // undefined т.к. класса больше нет

        
        
          
        
      

В .remove() можно передать несколько аргументов и удалится несколько классов

        
          
          // Предположим следующий элемент// <div class="banner hidden animated">...</div>const elem = document.querySelector("div.banner")// Убираем классы hidden и animatedbutton.classList.remove("hidden", "animated")
          // Предположим следующий элемент
// <div class="banner hidden animated">...</div>
const elem = document.querySelector("div.banner")

// Убираем классы hidden и animated
button.classList.remove("hidden", "animated")

        
        
          
        
      

Element.classList.replace

Секция статьи "Element.classList.replace"

Метод позволяет заменить одно значение класса другим. Метод принимает 2 параметра:

  • название класса, который нужно заменить
  • название класса, на что нужно заменить

После выполнения .replace() возвращает boolean-значение, которые сообщает нам об успешности или неуспешности операции:

  • true если класс был заменён
  • false если ничего не изменилось
        
          
          // На кнопке есть класс hiddenconst button = document.querySelector("button.hidden")// Заменяем класс hidden на visibleconst result = button.classList.replace("hidden", "visible")console.log(result) // Будет true и класс успешно заменился на visible// Попробуем заменить еще разconst resultAgain = button.classList.replace("hidden", "visible")console.log(result) // Теперь будет false, потому что ничего не изменилось
          // На кнопке есть класс hidden
const button = document.querySelector("button.hidden")

// Заменяем класс hidden на visible
const result = button.classList.replace("hidden", "visible")
console.log(result) // Будет true и класс успешно заменился на visible

// Попробуем заменить еще раз
const resultAgain = button.classList.replace("hidden", "visible")
console.log(result) // Теперь будет false, потому что ничего не изменилось

        
        
          
        
      

Element.classList.toggle

Секция статьи "Element.classList.toggle"

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

        
          
          // На кнопке есть класс hiddenconst button = document.querySelector("button.hidden")// так как класс есть, то он будет убранbutton.classList.toggle("hidden")// А при повторном вызове будет снова добавленbutton.classList.toggle("hidden")
          // На кнопке есть класс hidden
const button = document.querySelector("button.hidden")

// так как класс есть, то он будет убран
button.classList.toggle("hidden")
// А при повторном вызове будет снова добавлен
button.classList.toggle("hidden")

        
        
          
        
      

Метод .toggle() принимает только один класс для переключения. Опционально вторым аргументом можно передать boolean-значение: метод будет работать как .add(), если передать true, и как .remove(), если передать false.

        
          
          // На кнопке есть класс submit, предположим что он единственныйconst button = document.querySelector("button.submit")// Передаём вторым аргументом false и будет работать как .remove()button.classList.toggle("submit", false)button.classList[0] // undefined, потому что класса больше нет// Передаём true и теперь класс добавитсяbutton.classList.toggle("submit", true)
          // На кнопке есть класс submit, предположим что он единственный
const button = document.querySelector("button.submit")

// Передаём вторым аргументом false и будет работать как .remove()
button.classList.toggle("submit", false)
button.classList[0] // undefined, потому что класса больше нет

// Передаём true и теперь класс добавится
button.classList.toggle("submit", true)

        
        
          
        
      

Имена классов

Секция статьи "Имена классов"
        
          
          const element = document.querySelector("div")// Метод не сработает и будет выброшена ошибка: Uncaught DOMException: String contains an invalid characterelement.classList.add("my awesome class")
          const element = document.querySelector("div")

// Метод не сработает и будет выброшена ошибка: Uncaught DOMException: String contains an invalid character
element.classList.add("my awesome class")

        
        
          
        
      

На практике

Секция статьи "На практике"

Егор Огарков

Секция статьи "Егор Огарков"

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

        
          
          const element = document.querySelector("div")// Можно через специальный методconst classes = Array.fom(element.classList)// Либо через оператор троеточияconst classes = [...element.classList]// Теперь нам доступны любые операции обычного массиваclasses.map(...)classes.filter(...)classes.reduce(...)
          const element = document.querySelector("div")

// Можно через специальный метод
const classes = Array.fom(element.classList)

// Либо через оператор троеточия
const classes = [...element.classList]

// Теперь нам доступны любые операции обычного массива
classes.map(...)
classes.filter(...)
classes.reduce(...)

        
        
          
        
      

🛠 Вместо использования Element.classList можно попробовать пользоваться Element.className. Это поле содержит строку с именами всех классов через пробел.

Предположим у нас есть элемент шапки:

        
          
          <header class="head theme-light">content</header>
          <header class="head theme-light">content</header>

        
        
          
        
      

В поле className будет находится точно такая же строка что и в атрибуте элемента class (даже если в ней будут лишние пробелы).

        
          
          const head = document.querySelector("header")// То же значение, что и в class-атрибуте элементаhead.className = "head theme-light"
          const head = document.querySelector("header")

// То же значение, что и в class-атрибуте элемента
head.className = "head theme-light"

        
        
          
        
      

С помощью этого поля можно легко менять класс элемента — достаточно присвоить ему новое значение. Если добавляете несколько классов, то их нужно обязательно указывать через пробел.

        
          
          // Используем элемент из предыдущего примераconst head = document.querySelector("div")// Теперь у элемента шапки будет три классаhead.className = "head theme-dark bordered"
          // Используем элемент из предыдущего примера
const head = document.querySelector("div")

// Теперь у элемента шапки будет три класса
head.className = "head theme-dark bordered"

        
        
          
        
      

Однако если с классами приходится работать часто или нужно сделать что-то сложнее, чем просто переопределить класс, то удобнее использовать методы из classList.