dojo und Notes: Artikel 4 - dojo.query - CSS3-Abfragen

von Bernd Hort,
assono GmbH, Standort Hamburg,

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

Desweiteren ist eine Abfrage nach Attributen
möglich

Außerdem können Pseudoklassen angegeben
werden

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.

Fachbeitrag IBM Domino Entwicklung JavaScript

Sie haben Fragen zu diesem Artikel? Kontaktieren Sie uns gerne: blog@assono.de

Sie wollen eine individuelle Lösung? Kontaktieren Sie uns

Weitere interessante Artikel

IBM Cognos Analytics 11.0.9 (R9)

IBM Cognos Analytics 11.0.9 (R9)

Erst Mitte November hatten wir über Neuerung in der Version 11.0.8 gebloggt. Knapp ein Monat später veröffentlicht IBM die Version 11.0.9 … Mehr

von
Filip Meyer
,

Sie haben Fragen? Wir sind für Sie da.

Wenn Sie mehr über unsere Angebote erfahren möchten, können Sie uns jederzeit kontaktieren. Sie können uns auf verschiedene Weisen für eine unverbindliche Erstberatung erreichen:

assono GmbH

Standort Kiel (Zentrale)
assono GmbH
Lise-Meitner-Straße 1–7
24223 Schwentinental

Standort Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Telefonnummern:
Zentrale: +49 4307 900 407
Techn. Hotline: +49 4307 900 403
Vertrieb: +49 4307 900 402

E-Mail-Adressen:
kontakt@assono.de
bewerbung@assono.de