AndreaHTML atribut class je znám každému webovému vývojáři a zejména kodérům. Umožňuje elementu přiřadit jednu nebo více tříd, které mohou být použity ke stylování elementu pomocí (CSS). Samozřejmě, že lze elementy stylovat přímo v javascriptu, ale to není příliš vhodný způsob. V JS se taktéž třídy využívají k označení prvků, protože je pak snažší vybírat množinu elementy nejen podle názvu html tagu, ale i podle tříd. Na přítomnost třídy u elementu běžně vážeme nějakou funkcionalitu, např. skrytí a odkrytí elementu, nebo zvýraznění položky v seznamu.
Nastavení class atributu patří mezi poměrně rutinní operace, které provádíme v DOMu. Pro přidávání, odebírání a přepínání CSS tříd JavaScript poskytuje dva způsoby.
Pomocí className
Nastavení požadované třídy se provádí změnou element.className.
element.className = "vlastni-trida";
Nevýhodou tohoto přístupu je fakt, že atribut class může obsahovat více tříd (např. class="class1 class2 class3"), které jsou unikátní. Duplicitní třídy nám chování elementu neovlivňují. Hodnota className se nastvuje celá. Mnipulace s třídami v atributu je obdobná práci s množinou, u které máme k dispozici operaci náleží, která nám řekne zda již prvek v množině je či není. V případě className si musí programátor ohlídat vše sám, vyparsovat a zkontrolovat jestli vybraná třída v řetězci je či ne. Operace přidání nové třídy je ještě jednoduchý:
element.className += ' selected';`
Nejspíš vás napadlo, že v případě duplicit nastanou problémy.
Pomocí classList
Není to tak dávno, co byla do JavaScriptu v prohlížeči přidána kolekce classList, která vrací DOMTokenList. Ta nám poskytuje množinový přístup ke třídám a tak je přidávání, odebírání a přepínání tříd stejně jednoduché jako třeba v jQuery, ke kterému se historicky mnozí vývojáři upínali, díky absenci těhle užitečných metod :). Dnes už je podpora v prohlížečích dobrá a není třeba se bát classList použít na produkci. Podporuje ji dokonce i IE 10.
Práce s třídami jako s množinou
element.classList.contains('vlastni-trida');
element.classList.add('vlastni-trida');
element.classList.remove('vlastni-trida');
Příjemný bonus je přepínací metoda toggle().
element.classList.toggle('vlastni-trida');
IE historicky neumožnovalo přidávat více tříd najednnou, Firefox přidal tuto možnost až od verze 26.
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
