Accessing DOM Elements the Natural Way

You already know CSS. Why learn a new language for DOM manipulation when you can use CSS selectors?

midori allows the use of standard CSS syntax to access DOM elements, and supports most CSS2 and CSS3 selectors regardless of the web browser you are using. There are three ways to work on returned DOM elements. You can check the table below for live results.

Passing JavaScript code to modify a single property, using the built-in apply() method:

// Sets the background color of all the cells in even rows to "yellow"
// in the "cities" table
midori.get('#cities tr:nth-child(even) td').apply(           [Run]
   'style.backgroundColor = "yellow"');

Passing a function that takes a single parameter for more complex operations, again using the apply() method:

// Marks the cells whose values are 12 or bigger in the "cities" table
midori.get('#cities td').apply(function (o) {                [Run]
   if (parseInt(o.innerHTML) >= 12) o.style.backgroundColor = 'red';
} );

Directly accessing array entries returned by midori.get() is also possible.

// Returns the contents of the second cell
var secondCell = midori.get('#cities td')[1].innerHTML;      [Run]

Top 5 Cities by Population:

#	City	Population in millions	Country
1.	Mumbai	13.6	India
2.	Karachi	12.1	Pakistan
3.	Istanbul	11.3	Turkey
4.	Delhi	11.3	India
5.	Sao Paulo	10.8	Brazil

For more information including the list of supported CSS selectors, you can refer to the documentation entry for midori.get().