document.getElementsByClassName et IE7??

Version imprimable

17/11/2008, 22h11
Prosis

document.getElementsByClassName et IE7??

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 :)
17/11/2008, 22h20
Bovino

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 !
17/11/2008, 22h24
Prosis

Cette méthode n'existe pas??

Pourtant je n'utilise pas Prototype.

J'ai juste fait

Code:

document.getElementsByClassName('classe')

et ca a marché... 8O
17/11/2008, 22h36
Bovino

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 ?
17/11/2008, 23h05
Prosis

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

bonjour,

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

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

Exemple (qui fonctionne sous FF3) :

Code:

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.

17/11/2008, 23h18
Bovino

:evilred: il va vraiment falloir que je passe à FF3 alors !!!
17/11/2008, 23h22
Auteur

Citation:

Envoyé par Bovino

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

:mrgreen:

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

Code:

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 :aie:

18/11/2008, 15h50
Prosis

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! :D Merci!
06/07/2009, 10h36
pontus21

Quelle implémentation de la fonction as-tu choisie pour IE ?
Merci.
06/07/2009, 11h22
SpaceFrog

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

Citation:

Envoyé par bigboomshakala

Code:

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 :aie:

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:

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); 
     ......
  }
}

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:

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; }

Citation:

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!.

Citation:

Envoyé par bigboomshakala

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

Est ce que
Code:

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.

bonjour,

Citation:

Envoyé par Mohamed_DEV

Est ce que

Code:

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:

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; 
  }
}