Fonction getelementsbyclass

Soyez le premier à donner votre avis sur cette source.

Snippet vu 12 794 fois - Téléchargée 35 fois

Contenu du snippet

Je pense que le titre est assez explicite : la fonction retourne tout le elements ayant une classe spécifié

Cette source n'est pas de moi : http://www.pcinpact.com/forum/index.php?s=04183db918dad860da2b324f036406ed&showtopic=23880

Source / Exemple :


/* Retourne tout les elements du documents ayant comme class maClass */    
function getElementsByClass(maClass)
{  
	/*	Tableau comportant les elements de retour*/
	var tabRetour = new Array();
	/*  Tableau temporaire necessaire pour faire la boucle et rechercher
		les elements ayant la classe précisé, il va contenir tout les 
		elements du documents */
	var tabTmp = new Array();
	/* Recupere tout les elements du document */
	tabTmp = document.getElementsByTagName("*");
	/* Compteur, sert à incrementer le tableau des valeurs de retour */
	j=0;
	/* Pour chaque element de tabTmp */
	for (i=0; i<tabTmp.length; i++) { 
		/* on regarde si la classe de l'i-eme element est celle qu'on recherche */ 
		if (tabTmp[i].className==maClass) 
		{  
			/*si oui on ajoute dans notre tableau de retour à l'index j */
			tabRetour[j]=tabTmp[i];
			/* on incremente de 1 j pour pas réecrire l'element suivant par dessus */
			j++;
		}  
	/* Element suivant ... */
	}     
	/* on retourne notre tableau d'elements ayant la classe spécifié*/
   return tabRetour;
} 

Et comme vous me l'avez demandé, voici un exemple d'utilisation :

<head>
   <style type="text/css">
     .pair{height:10px;color:red;}
     .impair{height:15px;color:blue;}
   </style>
   <script language="JavaScript" type="text/javascript">
   function getElementsByClass(maClass) {  
      var tabRetour = new Array();
     var tabTmp = new Array();
     tabTmp = document.getElementsByTagName("*");
     j=0;
      for (i=0; i<tabTmp.length; i++) {  
          if (tabTmp[i].className==maClass) {  
            tabRetour[j]=tabTmp[i];
        j++;
          }  
       }
      return tabRetour;
   }
   function changer(){
     for(var i=0;i<getElementsByClass("pair").length;i++){
       getElementsByClass("pair")[i].style.color="green";
    }
   }
   </script>
</head>
<body>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <hr class="impair"></hr>
   <hr class="pair"></hr>
   <input type="button" value="click" onclick="changer()" />
</body>

Conclusion :


Les commentaires sont toujours la bienvenue.

marche sur IE6 SP2 et Firefox

A voir également

Ajouter un commentaire Commentaires
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
29
Bonjour avec l'experience (cette source date de 2 ans et demi :p) j'ai appris que cet approche n'est pas la meilleure, bien souvent il est plus simple de passer par des id car beaucoup plus rapide. Mais dans certains cas on a pas le choix et ce genre de fonction peut être utile, mais c'est à consommer avec modération.

Question perf, regarde ici http://extjs.com/blog/2007/07/10/css-selectors-speed-myths/ c'est relativement explicite :-)
Messages postés
4
Date d'inscription
vendredi 3 mars 2006
Statut
Membre
Dernière intervention
4 février 2008

j'ai trouvé le script qui marche partout et est instantané :
http://my.opera.com/Groumphy/blog/index.dml/tag/getElementsByClass
Messages postés
4
Date d'inscription
vendredi 3 mars 2006
Statut
Membre
Dernière intervention
4 février 2008

ca ne marche pas chez moi avec firefox 2.0.0.5

avec ie6028 ca marche, j'ai fais un essai sur une page qui a beaucoup d'éléments et c'est vraiment long 2 secondes pour que les modifs apparaissent

je cherche d'autres scripts
Messages postés
6814
Date d'inscription
dimanche 15 décembre 2002
Statut
Modérateur
Dernière intervention
13 octobre 2010
29
d'accord, je ne pensais pas que ce code aurait pu etre interessant pour les manipulation de tableaux, moi personelement je trouve que cette fonction peut servir dans beaucoup de cas, et je ne pense pas qu'il soit vraiment necessaire de savoir comment elle fonctionne, mais je vais la commenter.
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
41
euh vous avez pas bien saisi...
Je trouves que c'est plus une démonstration de l'insttruction length et des tableaux qu'une source en soi...

Donc çaaurait plus eu sa place dans un tutoriel...
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.