Свойство classList на языке Javascript

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

Синтаксис

var elementClasses = elem.classList;

Результат — псевдомассив DOMTokenList, включающий все классы узла elem

Методы

ClassList является геттером. Объект, возвращаемый им, имеет несколько методов:

• add( String [,String] ) — добавляет элементу указанные классы
• remove( String [,String] ) — удаляет у элемента указанные классы
• item ( Number ) — результат аналогичен вызову сlassList[Number]
• toggle ( String [, Boolean]). Если у элемента отсутствует класс — добавляет, в противном случае — убирает. Если вторым параметром передано false — удаляет указанный класс, а если true, то добавляет. Если вторым параметром передана переменная с typeof == ‘undefined’ или undefined, поведение будет аналогичным передаче только первого параметра при вызове toggle.
• contains ( String ) — проверяет, есть ли этот класс у элемента (вернёт true или false)

Также у ClassList есть свойство length, возвращающее количество классов у элемента.

Примеры

<div id=»clock»class=»example for you»></div>
var elem = document.querySelector(«#clock»)

//Выведем классы
console.log(elem.classList);//DOMTokenList [«example», «for», «you»]

//Добавим классы
elem.classList.add(«ok»,»understand»);
console.log(elem.classList);//DOMTokenList [«example», «for», «you», «ok», «understand»]

//Переключим классы
elem.classList.toggle(«you»);
elem.classList.toggle(«he»);
console.log(elem.classList);//DOMTokenList [«example», «for», «ok», «understand», «he»]

//Проверим класс
console.log(elem.classList.contains(«example»));//true
console.log(elem.classList.contains(«lol»));//false

//И удалим классы
elem.classList.remove(«example»,»for»,»understand»,»he»);
console.log(elem.classList);//DOMTokenList [«ok»]

Полифил

// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function(){
// helpers
varregExp=function(name){
returnnewRegExp(‘(^| )’+ name +'( |$)’);
};
varforEach=function(list, fn, scope){
for(var i =0; i < list.length; i++){
fn.call(scope, list[i]);
}
};

// class list object with basic methods
functionClassList(element){
this.element = element;
}

ClassList.prototype ={
add:function(){
forEach(arguments,function(name){
if(!this.contains(name)){
this.element.className +=’ ‘+ name;
}
},this);
},
remove:function(){
forEach(arguments,function(name){
this.element.className =
this.element.className.replace(regExp(name),»);
},this);
},
toggle:function(name){
returnthis.contains(name)
?(this.remove(name),false):(this.add(name),true);
},
contains:function(name){
returnregExp(name).test(this.element.className);
},
// bonus..
replace:function(oldName, newName){
this.remove(oldName),this.add(newName);
}
};

// IE8/9, Safari
if(!(‘classList’inElement.prototype)){
Object.defineProperty(Element.prototype,’classList’,{
get:function(){
returnnewClassList(this);
}
});
}

// replace() support for others
if(window.DOMTokenList &&DOMTokenList.prototype.replace ==null){
DOMTokenList.prototype.replace =ClassList.prototype.replace;
}
})();

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

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