`.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`

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

        
          
          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`

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

        
          
          // На кнопке есть класс 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`

Метод позволяет заменить одно значение класса другим. Метод принимает 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`

Метод можно использовать чтобы включать или выключать класс. Если при вызове .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")

На практике

windrushfarer

🛠 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.