02.07.2010

dojo and Notes: Article 4 - dojo.query() using CSS selectors

>>Author:  Bernd Hort
>>Ort:     Hamburg

URL: http://www.assono.de/blog/d6plinks/dojo-and-Notes-article-4-dojo-query

Category: dojo, Web-Entwicklung, Entwicklung, Lotus Domino

The last article dealt primarily with the presentation of the sample application and with the first step in that direction. Today we cover dojo.query(), which is pretty much the most important and most powerful method in the dojo toolkit. Simply put, dojo.query() returns a set of HTML DOM nodes that satisfy a given CSS selection. The ingenious thing is that we can use CSS-3 queries in browsers which do not support CSS-3 natively.

Supported CSS selectors are

class selectors, e.g., ".foo"
node type selectors, e.g. "span"
descendant selectors, e.g. "table div"
> child element selectors, e.g. "#tabular_data > div"
#foo style ID selectors
* universal selector
~, the immediately preceeded-by sibling selector
+, the preceeded-by sibling selector

It is also possible to query attributes:

[foo] attribute presence selector
[foo='bar'] attribute value exact match
[foo~='bar'] attribute value list item match
[foo^='bar'] attribute start match
[foo$='bar'] attribute end match
[foo*='bar'] attribute substring match

Pseudo class selectors are also supported

:first-child, :last-child, and :only-child positional selectors
:empty content empty selector
:checked pseudo selector
:nth-child(n), :nth-child(2n+1) style positional calculations
:nth-child(even), :nth-child(odd) positional selectors
:not(...) negation pseudo selectors

To be clear about this one: The fastest way to get a handle of a DOM node via an ID is to use dojo.byId().

In our sample application we want to assign a different background to every other session. Here is the JavaScript code to achieve this:

dojo.addOnLoad(function(){
// every odd div in the page with the class "session" assigned
dojo.query(".session:nth-child(odd)").addClass("oddSession");
});

The result can be viewed here.

The method dojo.query(".session:nth-child(odd)") returns a list of all the "odd" DOM nodes, which uses the CSS class ".session". To this DOM nodes the CSS class "oddSession" will be added with the command .addClass ("oddSession"). Everybody who takes a closer look at the sample page and the structure of the HTML code will discover two strange things. First, the DOM nodes returned are not really child's of the nodes with the "session" class as one would expect by the expression nth-child. In fact the method returns all the odd DOM nodes with the given class. Second, when counting dojo starts with zero. In the sample actually all the even sessions have the additional "oddSession" CSS class.

Now I have to explain the method dojo.addOnLoad(). In the previous article we called the function to fade in the headline by using the onLoad event of the body tag. Although it worked this is not the right way in dojo. It could happen that at the time the onLoad event fires not all dojo components are loaded and initialized. If we would try use one of those components an error would be the consequence. By using dojo.addOnLoad() we ensure that all dojo components are loaded and initialized before the registered function are called.

In the next dojo article I will talk about the dojo.fx package, which has all we need to animate the elements on our web page.

Comments

Wenn nth-child nicht die Kinder selektiert, sollte es vllt. anders in der Auflistung der Pseudoklassen stehen. Oder habe ich das jetzt falsch verstanden?

BTW ist es etwas merkwürdig, dass die Artikel-Sprache abhängig vom System ist, es aber keine (offensichtliche?) Möglichkeit gibt die Sprache zu wechseln. Außerdem fehlt in dem head-Bereich die Sprachanpassung für die RSS-Feeds, so dass man immer den deutschen Feed bekommt, wenn man über den RSS-Button an der URL im FF geht.

Posted by Marius At 04:57:48 On 18.07.2010 | - Website -

Die Spezifikation von W3C bezieht sich auf die Anzahl der "Geschwister"-Knoten (Siblings).{ Link } Da ist dem entsprechend mit "Kindern" gemeint. Dennoch finde ich den Begriff etwas verwirrend.

Was unseren Blog angeht, so wird die anzeigte Sprache automatisch aus den Browsereinstellungn ausgelesen. Ist dort die bevorzugte Sprache "Deutsch" sollte die Seite in Deutsch angzeigt werden, ansonsten in Englisch.
Für den RSS-Feed haben extra in der rechten Seitenleiste sowohl den deutschen RSS-Feed als auch den englischen RSS-Feed angeboten. Wobei erwähnt werden muss, dass wir nicht für alle Artikel eine Übersetzung haben.