fonction getElementsByClassName perso

**nicko_73** · 29/10/2009, 18h33

Bonjour,

afin d'être compatible avec plusieurs navigateurs j'ai trouvé cette fonction sur intenret : getElementsByClassName() pour sélectionner des éléments d'une page html par leur class.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getElementsByClassName(className, elm) {
	var selection = new Array();
	var regex = new RegExp("\\b" + className + "\\b");
	if(!elm) {
		elm = document;
	} else if(typeof(elm) == "string") {
		elm = document.getElementById(elm);
	}
 
	var elmts = elm.getElementsByTagName("*");
	for(var i=0; i<elmts.length; i++) {
		if(regex.test(elmts[i].className)) {
			//alert(elmts[i])
			selection.push(elmts[i]);
		}
	}
	return selection;
}

J'ai créé ce ode html pour l'exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<p class="ro">sqdfs <strong>dfkls <a href="#" class="titi">jfl</a></strong> kdj sdjfksdjf <a href="#" class="titi">sdkjflsj</a> dfsd</p>
<p id="bidule" class="coco" style="left:13px">sqdfs <strong>dfklsjfl</strong> kdj sdjfksdjf <a href="#" class="titi">hoho</a> dfsd</p>

Lorsque je fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(getElementsByClassName('ro'));

Il me retourne : [object HTMLParagraphElement], ce qui me parait normal. Par contre, lorsque je fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(getElementsByClassName('titi'));

Qui sont des classes mise sur les liens, il me retourne la valeur de "href" : http://domjs/#,http://domjs/#,http://domjs/#

J'ai du faire une erreur, mais je n'arrive pas à voir ou et ça fait 4H que je suis en train d'essayer de comprendre.

Pouvez-vous m'aider ?
Merci.
Bien cordialement.

**SpaceFrog** · 29/10/2009, 18h36

avec elle là pas d'erreur possible :
http://www.developpez.net/forums/d75...filtre-regexp/

**nicko_73** · 29/10/2009, 19h01

Merci pour ce lien. J'ai donc essayé et j'ai pris le script que j'ai testé de la façon suivante :

Votre fonction (la dernière que vous avez posté):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
document.getElementsByReg=function(tag,attr,reg,mod,val){
var tabReg=new Array();
var tabElts=document.body.getElementsByTagName(tag);
var TEL=tabElts.length;
 
if(!(reg instanceof RegExp)){
 
 
       if(reg.indexOf("*")>-1){
		  		reg=reg.replace(/\*/g,'.+');
 		  		reg=new RegExp(reg);
 		  		}
 		else {return	tabReg;
 			   }	
 		}
 
i=0;
while(tabElts[i]){
		if(tabElts[i][attr]){
	         if(reg.test(tabElts[i][attr])){
	         tabReg.push(tabElts[i]);}
	         }
	         reg.test("");
	i++;         
	}
return tabReg;
}

Et j'ai modifié légèrement votre exemple pour l'adapter au mien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<body onload="alert(document.getElementsByReg('*','class','titi'))" />
<p class="ro">sqdfs <strong>dfkls <a href="#" class="titi">jfl</a></strong> kdj sdjfksdjf <a href="#" class="titi">sdkjflsj</a> dfsd</p>
<p id="bidule" class="coco" style="left:13px">sqdfs <strong>dfklsjfl</strong> kdj sdjfksdjf <a href="#" class="titi">hoho</a> dfsd</p>
</body>

Je ne dois savoir m'en servir car cela ne me retourne rien. Pourtant en premier paramètre si je mets '*' cela veut dire tous les éléments du code html, puis 'class' qui ont pour attribue une class et 'titi' dons l'attribue class est titi. Est ce que j'ai bien compris ?

**SpaceFrog** · 29/10/2009, 19h49

ta fonction attends de preference une reg donc
'titi' => /titi/

sinon il faudra en faire une reg:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
if(!(reg instanceof RegExp)){
       if(reg.indexOf("*")>-1){
		  		reg=reg.replace(/\*/g,'.+');
 		  		reg=new RegExp(reg);
 		  		}
 		else {reg=new RegExp(reg);
 			   }	
 		}

il faudra echapper un peu plus de caractères bien qu'en principe avec les attributs il en devrait pas y avoir trop de soucis suaf poru les [] dans les names
je vais d'ailleurs modifier le script ...

**Bovino** · 29/10/2009, 21h45

Envoyé par nicko_73

Par contre, lorsque je fait ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(getElementsByClassName('titi'));

Qui sont des classes mise sur les liens, il me retourne la valeur de "href" : http://domjs/#,http://domjs/#,http://domjs/#

J'ai du faire une erreur, mais je n'arrive pas à voir ou et ça fait 4H que je suis en train d'essayer de comprendre.

C'est normal, les hyperliens sont référencés par rapport à leur lien de destination, mais il s'agit bien d'une référence à la balise.
Essaye par exemple de faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

alert(getElementsByClassName('titi')[0].className);

**nicko_73** · 30/10/2009, 09h05

Merci, je m'en suis rendu compte hier en faisant un innerHTML, et j'ai vu que ca fonctionnait pareil ?

Merci de votre aide et pour la fonction qui est pas mal du tout.

fonction getElementsByClassName perso

JavaScript

Vue hybride

Discussions similaires

Partager

Partager