Der letzte Artikel beschäftigte sich primär mit der Vorstellung der Beispielanwendung und mit dem ersten Schritt dahin. Heute beschäftigen wir uns mit dojo.query(), was so ziemlich die wichtigste und mächtigste Methode im dojo Toolkit ist. Vereinfacht ausgedrückt, liefert dojo.query() eine Menge von HTML DOM Knoten zurück, die eine vorgegebene CSS Selektion erfüllen. Das geniale daran ist, dass damit CSS-3 Abfragen auch in Browsern möglich sind, die gar kein CSS-3 unterstützen.
Mögliche CSS3-Selektoren
- Klassenname, z.B. ".foo"
- HTML-Elemente, z.B. "span"
- CSS Hierarchien, z.B. "table div"
- Direkte Kindelemente (>), z.B. "#tabular_data > div"
- Universal Selektor (*) - Unmittelbar vorangestellte
- Geschwisterknoten (~)
- vorangestellte Geschwisterknoten (+)
Desweiteren ist eine Abfrage nach Attributen
möglich
- [foo] Attribut ist vorhanden
- [foo='bar'] Attributwert stimmt genau überein
- [foo~='bar'] Attributwert stimmt mit einem Eintrag in der Liste der Werte überein
- [foo^='bar'] Attributwert beginnt mit
- [foo$='bar'] Attributwert endet mit
- [foo*='bar'] Attributwert enthält
Außerdem können Pseudoklassen angegeben
werden
- :first-child - erstes Kind
- :last-child - letztes Kind
- :only-child - nur ein Kind
- :empty - kein Kind
- :checked - aktivierte Radiobuttons & Checkboxes
- :nth-child(n) - n-te Kind
- :nth-child(even) - alle "geraden" Kinder
- :nth-child(odd) - alle "ungeraden" Kinder
- :not(...) - Umkehrungen
Der Vollständigkeit halber sei an dieser
Stelle erwähnt, dass eine Suche mit der Hilfe der ID am effizientesten
mit dojo.byId() durchgeführt wird.
In unser Beispielanwendung wollen wir
nun jeder zweiten Session einen anderen Hintergrund zuweisen. Dazu verwenden
wir den folgenden JavaScript-Code:
dojo.addOnLoad(function(){
// every odd div in the page with the class "session"
assigned
dojo.query(".session:nth-child(odd)").addClass("oddSession");
});Das
Ergebnis kann hier
angesehen werden.
Die Methode dojo.query(".session:nth-child(odd)")
liefert eine Liste aller "ungeraden" DOM-Knoten, welche die CSS-Klasse
".session" haben. Diesen DOM-Knoten wird mit dem Befehl .addClass("oddSession")
die CSS-Klasse "oddSession" zusätzlich zugewiesen. Wer sich die
Beispielseite
und den Aufbau des HTML-Codes
einmal näher ansieht, dem fallen zwei Sachen auf. Erstens werden nicht
wirklich die Kind-Knoten von den mit der Klasse ".session" versehenen
DOM-Knoten zurückgegeben, wie man bei dem Ausdruck nth-child erwarten würde.
Sondern es werden alle DOM-Knoten betrachtet, welche die gesuchte Klassen
haben, und davon jeweils die "ungeraden" in die Ergebnisliste
aufgenommen. Zweitens wird bei der Definition von "ungerade"
bei Null angefangen zu zählen. In dem Bespiel haben tatsächlich die geraden
Sessions die Klasse zugewiesen bekommen.
Dann muss ich nur noch den Befehl dojo.addOnLoad()
erläutern. Im vorherigen
Artikel haben wir die Funktion
für das Einblenden der Überschrift noch über das onLoad-Event des Body-Tags
aufgerufen. Obwohl es funktioniert hat, ist dieser Weg in dojo eigentlich
nicht der richtige. Es kann passieren, dass zu dem Zeitpunkt, wenn das
onLoad-Event feuert, noch nicht alle eingebundenen dojo-Komponenten vollständig
geladen und initialisiert sind. Wenn dann auf eine solche Komponente zugegriffen
werden soll, würde es eine Fehlermeldung geben. Besser ist es mit dojo.addOnLoad()
eine Funktion im dojo für die Ausführung nach dem Laden zu registrieren.
dojo stellt sicher, dass zum Zeitpunkt des Aufrufes wirklich alle notwendigen
dojo-Komponenten geladen sind.
Der nächste
dojo Artikel wird sich mit dem
dojo.fx-Package beschäftigen, dass Elemente für die Animation auf HTML-Seiten
zur Verfügung stellt.
