Une des fonctionnalités apparues avec le Javascript avancé et plus généralement d’AJAX concerne les sélecteurs CSS. Un outil magnifique : simple et efficace.
Petit historique
Simon Willison a eu en 2003 l’idée lumineuse d’utiliser la syntaxe des règles CSS pour récupérer des éléments du DOM. Il en résulte la première fonction nommée document.getElementsBySelector().
Les premiers sélecteurs arrivent fin 2005. On retient notamment CssQuery de Dean Edwards (auteur notamment de la mini-bibliothèque IE7 qui apportait un support CSS2 à IE6), et jSelect qui préfigure jQuery l’année suivante.
La démocratisation s’achève en 2006 et 2007 avec l’arrivée des frameworks JS/AJAX majeurs du marché, embarquant chacun leur sélecteur CSS.
Le succès tient en quelques é”vidences : des manipulations du DOM très efficaces avec très peu de lignes de code, surtout lorsque la bibliothèque offre des fonctionnalités de chaînage (comme jQuery).
En pratique
Voici quelques exemples de codes agissant sur cette page :
var liens = $$('.list-blogroll li a'); // Liens du blog rollvar titre = $$('#headerimg h1 a'); // Lien du titre var liens = $$('.list-archives li a["title=mai 2008"]'); // Lien archive de mai 2008
La performance de ces sélecteurs est saisissante. Elle tient à quelques astuces d’implémentation, en particulier l’utilisation de XPath qui permet d’obtenir des résultats extrêmement rapides.
Pour le comparer, un test de performance (Slickspeed) est disponible sur le site de Mootools : http://mootools.net/slickspeed/ (à tester sur les différents navigateurs)
Implémentation native dans les navigateurs
Le W3C a très vite mis en chantier une API, réfléchissant dès le début 2006 à une implémentation native du sélecteur CSS dans les navigateurs.
Les résultats de ces travaux arrivent cette année dans les A-grade browsers :
- WebKit a sorti une implémentation en février 2008, Safari 3.1 devrait offrir le support
- Mozilla a une implémentation native dans Firefox 3.1 alpha
- Microsoft a d’ores et déjà une implémentation opérationnelle dans la Beta 1 d’Internet Explorer 8
- Opera sortira sa version des sélecteurs natifs pour Opera 10.
Les fonctions natives sont utilisables de la manière suivante
var el = document.querySelector("#headerimg"); var matches = document.querySelectorAll(".list-blogroll, .list-archives");
Commentaires récents