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

by Bernd Hort,
assono GmbH, Standort Hamburg,


A picture named M2 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. wink.gif


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.

Technical article IBM Domino JavaScript Development

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

Do you want an individual solution? Contact us

More interesting entries

Any questions? Contact us.

If you want to know more about our offers, you can contact us at any time. There are several ways to contact us for a non-binding first consultation.

We don’t sell your data. 100% guaranteed. See: Privacy Policy
assono GmbH

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

Location Hamburg
assono GmbH
Bornkampsweg 58
22761 Hamburg

Phone numbers:
Human resources department: +49 4307 900 407
Marketing department: +49 4307 900 402

E-Mail adresses:
contact@assono.de
bewerbung@assono.de