Element#
Element.classList#
Właściwość classList zwraca zestaw słów DOM skojarzony z danym elementem, który reprezentuje jego klasy (zgodnie z atrybutem class) lub ustawia w postaci łańcucha znakowego nowe klasy. Jeśli element nie posiada żadnych klas to mamy do czynienia z pustym zestawem słów DOM. Właściwość jest tylko do odczytu.
Opis działania#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
var classes = element.classList;// getting element.classList = new_classes; // setting
gdzie poszczególne człony oznaczają:
- classes - zestaw słów DOM ze wszystkimi klasami elementu.
- element - węzeł będący obiektem kontekstu.
- new_classes - łańcuch znakowy reprezentujący nowe klasy elementu, gdzie separatorem między nimi są spacje.
Obiekt zwracany przez właściwość classList implementuje interfejs DOMTokenList, dlatego będzie posiadał specyficzne polecenia z tego interfejsu. Dzięki nim manipulowanie poszczególnymi klasami w elemencue jest znacznie wygodniejsze, niż wykorzystanie w tym celu właściwości Element.className operującej jedynie na tekście.
Elementami (nie mylić z węzłami elementowymi) w zestawie słów DOM są łańcuchy znakowe (tzw. unikatowe słowa) reprezentujące poszczególne klasy danego elementu, które najprościej wydobyć za pomocą indeksowego odwołania:
var class = element.classList[index];gdzie poszczególne człony oznaczają:
- class - łańcuch znakowy reprezentujący konkretną klasę w zestawie słów DOM.
- element - węzeł będący obiektem kontekstu.
- index - liczba całkowita reprezentująca pozycję konkretnej klasy w zestawie słów DOM.
Ustawianie nowej wartości poprzez właściwość classList polega na zasadzie automatycznego przekierowania na inną właściwość DOMTokenList.value. W przypadku właściwości classList zachowanie to jest nowością wynikającą z konsolidacji dwóch interfejsów operujących na zestawach i pozostawieniu przy życiu tylko jednego z nich. Dzięki temu można całkowicie zrezygnować ze stosowania właściwości Element.className.
Więcej szczegółów związanych z elementami, ich potencjalnymi atrybutami oraz spoiwem w postaci mapy nazwanych atrybutów umieściłem w zbiorczym dziale "Podstawy - Elementy i atrybuty" oraz w odrębnym dziale "Podstawy - Zestawy".
Prosty przykład:
<script>
function showTokens(set){
return Array.prototype.slice.call(set).join(" ");
}
var html = document.documentElement; // referencja do elementu HTML
document.write(html.classList.constructor); // function DOMTokenList() { [native code] }
document.write("<br>");
document.write(typeof html.classList); // object
document.write("<br>");
document.write(html.classList.add); // function add() { [native code] }
document.write("<br>");
document.write(showTokens(html.classList)); // "" - pusty łańcuch znakowy
document.write("<br>");
document.write(html.classList.length); // 0
document.write("<br><br>");
html.className = "Test1 Test2 Test3"; // ustawiamy wartość atrybutu class
document.write(showTokens(html.classList)); // Test1 Test2 Test3
document.write("<br>");
document.write(html.classList.length); // 3
document.write("<br>");
document.write(html.classList[0]); // Test1
document.write("<br>");
document.write(html.classList[1]); // Test2
document.write("<br>");
document.write(html.classList[2]); // Test3
document.write("<br>");
document.write(typeof html.classList[0]); // string
document.write("<br><br>");
html.classList = "Test4"; // ustawiamy wartość atrybutu class przez zestaw (tylko Firefox i Chrome)
document.write(showTokens(html.classList)); // Test4
document.write("<br>");
document.write(html.classList.length); // 1
document.write("<br>");
document.write(html.classList[0]); // Test4
document.write("<br><br>");
(function(){
"use strict";
try{
html.classList = "Test4"; // ustawiamy wartość atrybutu class przez zestaw (tylko Firefox i Chrome)
if (html.classList == "Test4"){
document.write("Przypisanie nowej wartości do właściwości classList działa bez problemu.");
}
else{
document.write("Przypisanie nowej wartości do właściwości classList nie działa prawidłowo.");
}
}
catch(e){
document.write("W trybie ścisłym przypisanie nowej wartości do właściwości classList zrzuca błąd:");
document.write("<br>");
document.write(e); // opis zależny od przeglądarki
document.write("<br>");
document.write(e.constructor); // function TypeError() { [native code] }
}
}());
</script>Na chwilę obecną jedynie przeglądarki Firefox i Chrome obsługują właściwość classList zgodnie z najnowszymi wymaganiami specyfikacji DOM4, gdyż faktycznie zezwalają na ustawianie nowej wartości bezpośrednio przez samą właściwość. Trzeba o tym pamiętać w przypadku starszych przeglądarek i zastosowaniu trybu ścisłego dla JavaScriptu, bo w takiej sytuacji próba przypisania nowej wartości do właściwości może wygenerować błąd (np. w przeglądarce IE, ale nie w Operze na Presto).
Właściwość classList pojawia się dopiero w specyfikacji DOM4.
Składnia Web IDL#
interface Element : Node { [SameObject, PutForwards=value] readonly attribute DOMTokenList classList; }