Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
16 novembre 2009 1 16 /11 /novembre /2009 02:00

Le premier article donnait les moyens de trouver un élément par son identifiant (getElementById) ou par sa balise (getElementsByTagName). Celui-ci traite de la manière de le trouver par sa classe.

Trouver des éléments par leur classe : le cas le plus commun

Il n'existe pas de méthode getElementsByClassName mais, souvent, on sait déjà un peu ce qu'on cherche : un lien, un div, etc. . On procède alors en deux temps :

  1.  ramasser  avec getElementsByTagName les éléments de la nature désirée,
  2. faire le tri de cette collection en parcourant la liste et en testant la classe de chaque élément trouvé.

Exemple : pour ne traiter que les liens de classe biblio dans tout le document, le code serait

 var i,r,rr=document.getElementsByTagName('a') ; for(i=0;r=rr[i];i++) if (r.className && /(?:\s|^)biblio(?:\s|$)/.test(r.className) ) {/* traitement du lien */} 

Variante : si on ne veut que le premier élément, on peut interrompre la boucle dès qu'on trouve cet élément :

 var i,r,rr=document.getElementsByTagName('a') ; for(i=0;r=rr[i];i++) if (r.className && /(?:\s|^)biblio(?:\s|$)/.test(r.className) ) {/* traitement du lien */ break; } 

Si on le peut on restreindra la recherche : il peut y avoir beaucoup d'éléments a dans une page ! Se limiter à la zone où l'on sait trouver les quelques individus désirés peut faire gagner beaucoup de temps de traitement. Si, par exemple, les liens cherchés ne peuvent se trouver que dans la zone cl_1_0 de la page, le code devient

 var i,r,rr=document.getElementById('cl_1_0').getElementsByTagName('a') ; for(i=0;r=rr[i];i++) if (r.className && /(?:\s|^)biblio(?:\s|$)/.test(r.className) ) {/* traitement du lien */} 

En pratique il n'est pas rare de dégrossir la recherche par plusieurs boucles imbriquées : par exemple on cherche d'abord tous les div de classe article puis, dans ces div, tous les liens d'une certaine classe.

Trouver des éléments par leur classe : le cas général

Celui-là je ne l'aime pas ! même si l'intention est séduisante : il consiste à écrire sa propre méthode générale getElementsByClassName.

Il faut, pour cela, ramasser les éléments de TOUS les types (toutes les balises possibles), faire ensuite le tri dans chaque sous-ensemble en recopiant les références trouvées dans un tableau auxiliaire, enfin renvoyer la référence de ce tableau.

Bilan : beaucoup de boucles dont la plupart seront pour rien (on n'utilise pas souvent des balises comme addr ou var), beaucoup de tests dont la plupart échoueront, tout ça pour récupérer dix ou quinze références et souvent une seule. Autant dire que je n'ai pas pris la peine d'écrire (ou d'emprunter ailleurs) cette méthode, et ne puis donc vous en donner le code source.

Je crois meilleur d'utiliser la connaissance que l'on a déjà de l'organisation de la page. Ce qui suppose que la page ait une organisation, donc que l'on y ait un peu réfléchi, ce qui ne fait jamais de mal.


Pour mémoire : d'autres liens JavaScript

par Aïe mes doigts ! - dans JavaScript Mania
commenter cet article

commentaires

Archives