HTML5 Tutorial, czyli kurs HTML w wersji 5 – cz. 1: classList API

Do standardu JavaScript w HTML5 została dodana funkcjonalność, która już dawno była zaimplementowana w prawie wszystkich frameworkach i podobnych bibliotekach JavaScript. Chodzi o zestaw kilku funkcji wchodzących w skład tzw. classList API.

Rozchodzi się tu o to, że do wszystkich węzłów w DOM (innymi słowy: wszystkich elementów HTML) został dodany obiekt classList, który udostępnia mechanizmy do dodawania, usuwania oraz przełączania klas CSS na danym węźle (elemencie).

Cały obiekt classList składa się z następujących metod i atrybutów:

classList.length
Atrybut zawierający liczbę przypisanych do elementu klas.

classList.add( ‘jakasKlasaCSS’ )
Funkcja służąca do przypisania do elementu podanej klasy.

classList.contains( ‘jakasKlasaCSS’ )
Funkcja do sprawdzenia, czy element ma przypisaną daną klasę.

classList.item( 0 )

Funkcja do zwrócenia nazwy klasy w liście klas. Tutaj zwracana jest pierwsza klasa (numeracja od 0). Gdy indeks wykracza poza zakres, to zwracany jest null.

classList.remove( ‘jakasKlasaCSS’ )
Funkcja usuwa daną klasę z elementu.

classList.toggle( ‘jakasKlasaCSS’ )

Funkcja przełącza daną klase, czyli usuwa ją, gdy już jest przypisana, a dodaje ją, gdy nie jest jeszcze przypisana.

classList.toString()
Funkcja zwraca wartość atrybutu class danego elementu.

Teraz prosty przykład. Zakładamy, że mamy przykładowy DIV z zadanym ID.

<div id="myDiv">
(...)
</div>

I teraz chcemy przypisać mu jakąś przykładową klasę, którą wcześniej zdefiniowaliśmy już w pliku CSS.

document.getElementById('myDiv').classList.add( 'myCssClass' );

W efekcie DOM zmienia się w:

<div id="myDiv" class="myCssClass">
(...)
</div>

Aby zobaczyć opisywane classList API w praktyce, można wejść na stronę http://html5demos.com gdzie znajduje się przykład http://html5demos.com/classlist.