En JavaScript, la récupération d’un élément passe souvent par les méthodes getElementById, getElementByTagsName ou getElementsByClassName.

Les derniers navigateurs prennent en charge une nouvelle méthode plus puissante querySelectorAll (compatibilité de la méthode) qui permet de récupérer des éléments en fonction d’un sélecteur CSS3, un peu à la manière de Sizzle, la librairie de sélection utilisée par JQuery.

Utilisation de querySelectorAll

Cette méthode est beaucoup plus intéressante car elle permet de filtrer plus facilement les éléments sur lesquelles on souhaite interagir.

La méthode querySelectorAll prend en paramètre un chaine de caractère qui représente une expression CSS et renvoie une NodeList. Afin de parcourir les éléments renvoyés, vous pouvez le parcourir avec une boucle for (document.querySelectorAll(‘#maDiv)[0]) ou en transformant le résultant en tableau.

Voici un exemple permettant d’alterner les couleurs des lignes d’un tableau avec une transformation en tableau.

Array.prototype.slice.call(document.querySelectorAll('#maincontent table tr'))
.filter(function(element, index, array){
  return index % 2 === 0;
})
.forEach(function(element, index, array){
  element.style.backgroundColor = 'Grey'
});

J’ai utilisé la fonction filter afin de ne sélectionner que les éléments paires, chose que j’aurais pu directement pu faire via le selecteur CSS tr:nth-child(odd).

A noter également que, comme dans la syntaxe CSS, on peut sélectionner plusieurs éléments en les séparant via une virgule :

document.querySelectorAll('#maDiv, .maClasse')

La méthode querySelector fonctionne de la même façon mais ne revoie que le premier élément vérifiant la ou les règles.

Avantage de Sizzle / JQuery

Sizzle est un projet mené par John Resig, qui n’est autre que le père de JQuery. Ce projet est un sélecteur CSS en Javascript. Ce projet est autonome et sans dépendance.

Quel est l’intérêt d’utiliser Sizzle me direz-vous. L’intérêt est multiple.

• compatibilité avec les vieux navigateurs
• Ajout de filtre de sélection :
• contient (texte) :contains
• contient (element) :has
• position :first, :last, :even, :odd, :gt, :lt, :eq
• négation :not
• élément de formulaire :input, :text, :checkbox, :file, :password, :submit, :image, :reset, :button
• Extensible

Avec JQuery, vous possédez en plus de fonction de manipulation de ces éléments rapide et puissante.

Ainsi, le code ci-dessus peut s’écrire avec JQuery :

$('table tr:odd').css('backgroundColor', 'Grey');

Simple non ?

Conclusion

La méthode querySelectorAll est maintenant bien supportée dans les navigateurs les plus récents et je ne peux que vous conseiller son utilisation si vous ne voulez pas utiliser des librairies additionnelles comme Sizzle/JQuery, qui apporte un support des anciens navigateurs et de plus grandes fonctionnalités. Pour les autres, JQuery c’est bon, mangez-en 😉