document.getElementsByClassName et IE7??

**Prosis** · 17/11/2008, 22h11

Bonjour

J'utilise getElementsByClassName qui fonctionne sans problèmes ni erreurs dans Firefox, Safari, Chrome mais pas dans * tan ta na na * Internet Explorer 7...

Savez-vous pourquoi?

Merci

**Bovino** · 17/11/2008, 22h20

Ce que je ne comprends surtout pas, c'est pourquoi ça fonctionne avec les autres navigateurs dans la mesure où cette méthode n'existe pas... à moins que tu aies oublié de préciser qu'il s'agit de la fonction de la lib Prototype dont il est spécifié qu'il faut éviter de l'utiliser car elle pose problème avec IE !

**Prosis** · 17/11/2008, 22h24

Cette méthode n'existe pas??

Pourtant je n'utilise pas Prototype.

J'ai juste fait

Code :

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

document.getElementsByClassName('classe')

et ca a marché...

**Bovino** · 17/11/2008, 22h36

Ben... là je comprends pas trop... si tu essayes getElementsByClassName() sur FF, tu obtiens bien une erreur comme quoi ce n'est pas une fonction ! Tu es sûr qu'aucun script de ta page n'appelle Prototype ou une autre lib ?

**Prosis** · 17/11/2008, 23h05

Non non j'ai tout fais moi même et je n'utilise rien d'autre...et en FF je n'ai aucune erreur

**Auteur** · 17/11/2008, 23h11

bonjour,

la fonction getElementsByClassName() est bien implémentée sous Firefox 3 : https://developer.mozilla.org/En/DOM...ntsByClassName

Elle n'est pas implémentée sous IE.

Exemple (qui fonctionne sous FF3) :

Code html :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 
<head>
 
<title></title>
 
 
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
 
<style type="text/css">
<!--
.testClasse{
  color:#0000FF;
}
-->
</style>
 
 
<script type="text/javascript">
<!--  
function test()
{
  alert(document.getElementsByClassName("testClasse").length);
}
//-->
</script>
 
</head>
 
<body onload="test()">
 
<div class="testClasse">coucou</div>
<div class="testClasse">coucou</div>
<div class="testClasse">coucou</div>
<div>coucou</div>
 
</body>
 
</html>

le alert() retourne 3 éléments.

**Bovino** · 17/11/2008, 23h18

il va vraiment falloir que je passe à FF3 alors !!!

**Auteur** · 17/11/2008, 23h22

Envoyé par Bovino

il va vraiment falloir que je passe à FF3 alors !!!

Ca ne résoudra pas le problème pour IE 7

**bigboomshakala** · 18/11/2008, 07h17

Code :

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

1
2
3
4
5
if (!document.getElementsByClassName){
  document.getElementsByClassName = function(){
    // une implémentation de la fonction
  }
}

comme ça si ton navigateur ne l'a pas, il l'a

**Prosis** · 18/11/2008, 15h50

Oh que je vais essayer ça car avec mon autre méthode j'ai des problèmes avec Safari. Je crois bien que cette façon me donnera le meilleur des deux mondes!

Je vous tiens au courant!

Addition: Ça fontionne! Merci!

**pontus21** · 06/07/2009, 10h36

Quelle implémentation de la fonction as-tu choisie pour IE ?
Merci.

**SpaceFrog** · 06/07/2009, 11h22

ça peut servir ça :
http://www.developpez.net/forums/d75...filtre-regexp/

**Mohamed_DEV** · 26/11/2009, 23h46

Envoyé par bigboomshakala

Code :

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

1
2
3
4
5
if (!document.getElementsByClassName){
  document.getElementsByClassName = function(){
    // une implémentation de la fonction
  }
}

comme ça si ton navigateur ne l'a pas, il l'a

Bosnoir,
Je me permets de remonter le sujet car je viens de tomber sur le même problème et la solution est plutôt simple:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
for (i=0; i<document.getElementsByTagName("*").length; i++)
{  
  //tester le nom de la classe de cet objet
  if (document.getElementsByTagName("*").item(i).className == nom_class)
  {
     //on récupère l'objet dans la variable
     var mon_obj = document.getElementsByTagName("*").item(i); 
     ......
  }
}

**bigboomshakala** · 27/11/2009, 09h53

bonjour,

ta solution est déjà limitée par le fait que l'élément cherché doit avoir exactement la classe css recherchée. si tu cherches "myClass1", un élément qui a "myClass1 myClass2" ne sera pas remonté...
2è point, ta fonction n'est pas du tout optimisée (multiples document.getElementsByTagName à chaque itération...)

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
function getElementsByClassName(className, tag, elm){
	var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
	var tag = tag || "*";
	var elm = elm || document;
	var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
	var returnElements = [];
	var current;
	var length = elements.length;
	for(var i=0; i<length; i++){
		current = elements[i];
		if(testClass.test(current.className)){
			returnElements.push(current);
		}
	}
	return returnElements;
}

**Mohamed_DEV** · 28/11/2009, 00h16

Envoyé par bigboomshakala

bonjour,
... ta solution est déjà limitée par le fait que l'élément cherché doit avoir exactement la classe css recherchée ...

Bonsoir,
C'est ce qui fait getElementsByClassName, non!.

Envoyé par bigboomshakala

2è point, ta fonction n'est pas du tout optimisée (multiples document.getElementsByTagName à chaque itération...)

Est ce que

Code :

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

1
2
3
4
5
6
7
8
9
 
for (i=0; i<document.getElementsByTagName("*").length; i++)
{  
  var X_obj = document.getElementsByTagName("*").item(i); 
  if (X_obj.className == nom_class)
  {
     var mon_obj = X_obj; 
  }
}

est plus optimisée?

Cordialement.

**Auteur** · 28/11/2009, 09h08

bonjour,

Envoyé par Mohamed_DEV

Est ce que

Code :

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

1
2
3
4
5
6
7
8
9
 
for (i=0; i<document.getElementsByTagName("*").length; i++)
{  
  var X_obj = document.getElementsByTagName("*").item(i); 
  if (X_obj.className == nom_class)
  {
     var mon_obj = X_obj; 
  }
}

est plus optimisée?

en ce qui me concerne j'évite les déclarations de variables dans le code et encore plus dans les boucles :

Code javascript :

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
 
var n, i, X_obj, mon_obj;
var tabObj;
var nom_class = "maClasse";
 
tabObj = document.getElementsByTagName("*");
n = tabObj.length;
 
for (i=0; i<n; i++)
{  
  X_obj = tabObj.item(i); 
  if (X_obj.className == nom_class)
  {
    mon_obj = X_obj; 
  }
}

document.getElementsByClassName et IE7??

JavaScript

Discussions similaires

Partager

Partager