Sélectionner des éléments en JavaScript
Par Clochix le mardi 26 août 2008, 08:37 - les petits tutos à toto - Lien permanent
Jusqu'à présent, les possibilités de sélectionner directement des élément d'une page web en JavaScript étaient plutôt limitées. On ne disposait que de:
- document.getElementById : en fonction de l'attribut id de l'élément, censé être unique à l'intérieur du document
- document.getElementsByName : en fonction de l'attribut name
- document.getElementsByTagName : en fonction de la balise
- element.getElementsByTagName : retourne les descendants d'un élément en fonction de leur balise.
- document.getElementsByClassName : en fonction de la classe (attention, cette fonction n'a pas encore été normalisée par le W3C, ce n'est qu'une proposition du WHATWG, elle n'est donc peut-ête pas disponible dans tous les navigateurs.)
Et c'est tout. Pour tout le reste, il fallait soit se promener dans le document avec les fonctions de parcours d'arbre du DOM (père, fils, frères), soit utiliser XPath, qui est plus lourd et moins simple à appréhender.
Heureusement, the times they are a-changin', et le W3C travaille en ce moment à l'élaboration d'une spécification permettant de sélectionner des éléments au moyen des sélecteurs CSS, c'est à dire de la syntaxe utilisée pour déterminer à quels éléments s'applique un style[1]. Cette spécification crée deux nouvelles fonctions, applicables soit à l'ensemble du document, soit à un seul élément. La première, querySelector(), ramène le première élément correspondant au sélecteur, dans le document ou parmi les descendants de l'élément à laquelle elle est appliquée. La seconde, querySelectorAll(), ramène tous les éléments. Il devient ainsi aisé de sélectionner des éléments en utilisant de nombreux critères.
WebKit implémente déjà cette interface depuis quelques mois, elle a atterri il y a quelques jours dans Firefox 3.1, Opera est OK aussi et, oh mon Richard, ça sera même dans IE 8, je n'en reviens pas !!! (je n'ai par contre pas trouvé l'info pour W3)
- Oui mais, mes utilisateurs n'utilisent pas de navigateurs modernes,
qu'est que je peux faire ?
- changez d'utilisateurs ! A défaut, la plupart des bibliothèques et des
frameworks javascript implémentent des fonctions similaires... non, oubliez
toutes les librairies et les framework JavaScript, tout cela c'était avant
John Resig, John Resig, l'homme
qui ne dort jamais, qui le vendredi participe au commit du
nouveau compilateur JavaScript à la volée de Firefox, le lundi livre une
nouvelle
version de l'indispensable Firebug, et entre les deux, s'ennuyant sans
doute un peu, écrit Sizzle une nouvelle librairie de quelques centaines de lignes
qui implémente le querySelectorAll dans tous les navigateurs qui ne le
possèdent pas, et avec des performances laissant sur place toutes les
précédentes implémentations. Si la programmation était discipline olympique,
John mériterait assurément plus d'une médaille, mais heureusement nous n'en
sommes pas encore là 
Notes
[1] cf mon rappel sur tous les sélecteurs CSS disponibles