SéLECTEURS CSS EN JS

illus

script : seek v1.0
langage : javascript
catégorie : fragment
usage : Sélectionnez les éléments du DOM en javascript, aussi facilement qu'en css.
tags : crossbrowser snippet

Concept

Dès que l'on chercher à améliorer des interfaces html grâce au javascript, on se trouve confronté à la question de la sélection des éléments HTML.
Javascript propose pour cela quelques outils natifs, tels que getElementById ou getElementsByTagName. Les méthodes de ce type sont hélas peu nombreuses, et pas très souples. La syntaxe de sélection des feuilles de style css est revanche bien plus souple et puissante. (exemple : div#id p.classe)

La fonction seek présentée ici permet de sélectionner en javascript des éléments html, sur le modèle de la syntaxe css (vous me suivez ?).

Demo

Voici une série d'éléments html imbriqués, disposant d'attributs id, class, et/ou rel.
Le formulaire suivant vous permet de formuler des requêtes css et de sélectionner les éléments correspondants. Chacun des éléments retenus sera hachuré.
(Si vous ne connaissez pas trop les sélecteurs css, reportez-vous à la syntaxe décrite un peu plus bas.)

seek("#test ")

#test
div#div0
div#div1

p#p0.clacla rel="relation-1"

div#div2.clacla

p#p1

div#div3 rel="relation-2"
div#div4.clacla
div#div5
div#div6.clacla rel="relation-3"

p#p2.clacla

p#p3

 

Intégration

Pour pouvoir faire appel à seek(), placez simplement dans votre page le bout de code suivant, entre les balises <head> et </head> de votre page :

<script src="seek.js" type="text/javascript"></script>

Syntaxe

seek ne requiert qu'un unique argument, dont la syntaxe vous sera tout à fait intuitive si vous connaissez vos sélecteurs css.

Procédons par exemples :

  • seek('div') retourne un tableau de toutes les div du document
  • seek('div p') retourne un tableau de tous les paragraphes du document, qui se trouvent à l'intérieur d'une div
  • seek('div > p')  : tous les paragraphes du document, directement enfants d'une div
  • seek('#id')  : l'élément dont l'identifiant est "id" (même dans ce cas, c'est un tableau qui sera retourné : un tableau à un seul élément !)
  • seek('.classe')  : les éléments ayant la classe "classe"
  • seek('[attr]')  : les éléments ayant un attribut "attr"
  • seek('[attr=val]')  : les éléments ayant un attribut "attr" dont la valeur est exactement "val"
  • seek('[attr~=val]')  : les éléments ayant un attribut "attr" pouvant contenir plusieurs valeurs séparées par des espaces, et dont au moins une des valeurs est "val"
  • seek('[attr=/reg/]')  : les éléments ayant un attribut "attr" dont la valeur correspond au motif d'expression régulière reg

Partant de là, il est possible de combiner les sélecteurs, afin de constituer des requêtes complexes :

  • seek('div.classe') les div ayant la classe "classe"
  • seek('div.classe p') les paragraphes à l'intérieurs des div ayant la classe "classe"
  • seek('div.classe p[attr=val]') les paragraphes dont l'attribut "attr" vaut "val", à l'intérieurs des div ayant la classe "classe"
  • seek('div.classe p[attr=val][attr2]') les paragraphes ayant un attribut attr2 quelconque ainsi qu'un attribut "attr" valant "val", à l'intérieurs des div ayant la classe "classe"
  • seek('div.classe p[attr=val][attr2] > img.truc[src=/\.jpe?g$/]') enfin bref, vous avez compris !

Bonus

Pour son fonctionnement, seek fait appel à un script de parcours des tableaux. Il s'agit d'une extension du prototype de l'objet Array, qui peut-être également très utile pour parcourir les tableaux d'éléments retournés pas seek.

Ainsi, tab.each(func) permet d'appliquer la fonction func pour chacun des éléments du tableau tab.

Cela permet par exemple de modifier le contenu d'une liste de la manière suivante :

seek('ul#exemple li').each( function(li,nb) {
	li.innerHTML = 'element numero ' + (nb+1);
});

Notez que dans func :

  • le mot-clé "this" fait référence au tableau parcouru
  • le premier argument de la fonction fait référence à l'élément courant
  • le second argument fait référence à l'index courant

Téléchargement

Vous trouverez dans ce zip le script en version minifiée (1.8Ko) et en version commentée. 

compatibilité :
Internet Explorer (6+) Firefox Safari Opera Google Chrome
(autres navigateurs non testés)

Commentaires

  • Publier un nouveau commentaire
  • gravatar
    lymk  le 25 août 2011, à 22h23
    Ca a l'air intéressant mais c'est dommage que les explications ne collent pas avec les exemple on doit tout repérer

    Notez que dans func :

    le mot-clé "this" fait référence au tableau parcouru // ou voit on le mot clé this dans l'exemple?
    le premier argument de la fonction fait référence à l'élément courant
    le second argument fait référence à l'index courant
  • gravatar
    theking  le 12 avril 2012, à 17h22
    @LYMK: le mot clé this il faut télécharger le script en version commenté et tu le trouveras ;)
  • Navré, le formulaire de commentaires est temporairement indisponible.