JavaScript свойство Element.classList

Определение и применение

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

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

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`classList`	Да	Да	Да	Да	10.0*	Да

JavaScript синтаксис:

const elementClassList = element.classList;

Если глобальный атрибут class не был установлен или является пустым, то elementClassList.length возвращает значение 0.

Версия JavaScript

Document Object Model (DOM) Level 1

Методы объекта DOMTokenList

Возвращаемый свойством classList объект DOMTokenList имеет следующие методы:

Синтаксис метода	Описание
add( val ); add( val, val, ...val ); val - String	Добавляет указанные значения класса. Если указанные классы уже существуют в атрибуте class элемента, то они игнорируются.
remove( val ); remove( val, val, ...val ); val - String	Удаляет указанные значения класса. Удаление класса, который не существует, не вызывает ошибки.
item( val ); val - Number	Возвращает значение класса по индексу в коллекции. Результат аналогичен вызову *сlassList[Number]*.
toggle( val ); toggle( val, force ); val - String force - Boolean	Когда присутствует только один аргумент переключает значение класса (если класс существует, то удаляет его и возвращает false, если нет, то добавит его и вернет true. Если второй аргумент имеет значение true, то указанное значение класса будет добавлено, а если значение false, удалено.
contains( val ); val - String	Проверяет, существует ли указанное значение класса в атрибуте class элемента.
replace( oldClass, newClass ); oldClass - String newClass - String	Производит замену существующего класса новым классом.

Пример использования

<div id = "myElem" class = "class1 class2 class3"></div>

// находим наш элемент в документе и инициализируем переменную этим значением
const myElem = document.querySelector("#myElem")

// выведем количество элементов в коллекции
console.log(myElem.classList.length); // 3

// выведем классы
console.log(myElem.classList); // ["class1", "class2", "class3", value: "class1 class2 class3"]

// добавим классы
myElem.classList.add("class4", "class5");
console.log(myElem.classList); // ["class1", "class2", "class3", "class4", "class5", value: "class1 class2 class3 class4 class5"]

// переключим классы
myElem.classList.toggle("class1"); // false
myElem.classList.toggle("class6"); // true
console.log(myElem.classList); // ["class2", "class3", "class4", "class5", "class6", value: "class2 class3 class4 class5 class6"]

// проверим наличие класса
console.log(myElem.classList.contains("class1")); // false
console.log(myElem.classList.contains("class6")); // true

// удалим классы
myElem.classList.remove("class2", "class3", "class4");
console.log(myElem.classList); // ["class5", "class6", value: "class5 class6"]

JavaScript Element