Einige globale Attribute zum Schluss - HTML5 - page 295

als Schmeckt mir! -Kriterium rot oder Apfel definieren, mit folgender Anweisung
erfolgreich sein:
var mmm = document.getElementsByClassName('rot Apfel');
Damit finden wir alle roten Früchte, alle Äpfel und natürlich auch einen roten
Apfel.
12.2 Beliebige »private« Attribute mit »data-*«
War es bisher in HTML nicht möglich, im Rahmen seiner Applikation Attribute
frei zu definieren, bietet die HTML5-Spezifikation jetzt einen Mechanismus, um
genau dies zu tun - das data-* -Attribut. Die Verwendung ist denkbar einfach
und verlangt lediglich, dass das gewünschte Attribut mit dem Präfix data- ver-
sehen wird. Die Einschränkungen bei der Namensgebung sind gering: So muss
der Attributwert mindestens 1 Zeichen lang sein, und es dürfen keine Groß-
buchstaben vorkommen. Am Beispiel des Dateneintrags für eine der 27 Haupt-
städte unseres Spiels könnten data -Attribute für Einwohnerzahl, geografische
Lage und dazugehöriges Land so aussehen:
<li id=at class=q
data-bev=1705080
data-geo-lat=48.20833
data-geo-lng=16.373064
data-country='Österreich'>Wien</li>
Wie können Sie jetzt auf Ihre privaten Attribute zugreifen? Eine Möglichkeit
wäre die klassische getAttribute() - und setAttribute() -Methode, doch die
Spezifikation hat Besseres zu bieten - die dataset -Eigenschaft. Sie erlaubt es,
alle data -Attribute eines Elements über element.dataset abzufragen und zu
setzen:
var el = q.namedItem('at');
var bev = el.dataset.bev; // 1705080
var lat = el.dataset.geoLat; // 48.208
var lng = el.dataset.geoLng; // 16.373
var ctr = el.dataset.country; // Österreich
// und zwei Jahre später vielleicht ...
el.dataset.bev = 1717034;
Spätestens in der dritten Zeile, bei el.dataset.geoLat , wird klar, dass Bindestri-
che bei data -Attributen eine besondere Bedeutung haben, denn nur so ist zu