Comparaison de NodeList sous différents navigateurs

**franculo_caoulene** · 17/06/2009, 16h57

Salut,

Je cherche plus une explication qu'une solution. Alors si vous l'avez, je vous en remercie grandement par avance.

Sauriez-vous pourquoi une simple comparaison de deux listes de nœuds identiques sous Opera et Safari retourne "faux", alors que sous Firefox et internet explorer elle retourne "vrai".

Illustration :

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
29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <title>comparer des listes de noeuds</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;color:#333;}
  body {padding:80px; background:#000;}
  form {margin:0 0 20px 0;padding:10px;width:260px;background:#333;}
  </style>
</head>
<body>
  <form id="f" method="post" action="perdu.html">
    <p><input id="c1" type="checkbox" name="c" value="1" /></p>
    <p><input id="c2" type="checkbox" name="c" value="2" /></p>
    <p><input id="c3" type="checkbox" name="c" value="3" /></p>
  </form>
  <script type="text/javascript">
  <!--
  var ns1 = document.getElementsByTagName("input");
  var ns2 = document.getElementsByTagName("input");
  alert(ns1===ns2);
  for(var i=0,imax=ns1.length;i<imax;i++){
    alert(ns1[i]===ns2[i]);
  }
  //-->
  </script>
</body>
</html>

C'est désespérant...

**SpaceFrog** · 17/06/2009, 17h18

à tout hasard Opéra ne rajoute pas un input type submit par defaut ?
ou un truc du genre ?
as tu comparé les length ?

**franculo_caoulene** · 17/06/2009, 17h26

Regarde bien le code fournit, j'affecte deux fois document.getElementsByTagName("input"), puis je compare. C'est le même, si Opera l'ajoute dans l'un, il l'ajoute dans l'autre. Par contre ce serait un comportement curieux s'il faisait ce que tu dis.

**Bovino** · 17/06/2009, 17h29

Peut-être que la collection récupérée avec Opera inclue une référence au nom de la variable ?

Mais en effet, c'est assez étonnant

**le_chomeur** · 17/06/2009, 17h31

alert(ns1===ns2); tu test le type ET les données , hors , ne pouvant tester les données je pense qu'il renvois faux, essaye de passer par un typeof pour le type ( une collection html ... )
puis une 2 eme boucle pour le type+donnée de chaque élément

**Bovino** · 17/06/2009, 17h36

@le_chomeur : non, le résultat est identique avec == !

**franculo_caoulene** · 17/06/2009, 17h42

Envoyé par Bovino

Peut-être que la collection récupérée avec Opera inclue une référence au nom de la variable ?

Mais en effet, c'est assez étonnant

Ça n'a pas l'air, j'essaie d'utiliser Dragonfly, mais c'est pas gagner.

**Bovino** · 17/06/2009, 17h45

Précision, ce comportement étrange apparait aussi avec Chrome et Safari !

**franculo_caoulene** · 17/06/2009, 17h48

Safari, je l'ai dit plus haut, Chrome, je n'ai pas pu tester, mais je m'y attendais... J'ai trouvé la solution, mais ça m'ennuie de ne pas connaître la cause.

**nod__** · 17/06/2009, 17h48

Bah en soi c'est pas si déroutant et pour le coup je trouve que le comportement d'opera et de webkit est plus cohérent.

Les éléments de la liste pointent vers le même objet du DOM, donc sont forcément égaux entre eux. Mais rien ne présuppose que la liste que retourne gebtn doit être le même objet.

Code :

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

1
2
3
4
5
var ns1 = document.getElementsByTagName("input");
var ns2 = document.getElementsByTagName("input");
 
ns1.prout = "prout";
alert(ns2.prout);

Là je crois que y'a pas photo… Opera et Webkit retournent une nouvelle instance de l'objet NodeList.

( edit )
On peut toujours dire "bla, bla, pour l'optimisation c'est mieux de retourner toujours le même objet" mais opera c'est pas spécialement un navigateur lourd et impotent

et puis merde, si on demande deux listes, on veut que ça soit effectivement deux listes, pas deux références à la même liste.

M'enfin je sens que beaucoup de monde va pleurer quand on va pouvoir commencer à utiliser les prototypes DOM…

**Bovino** · 17/06/2009, 17h59

Oui, il semble que ce soit la bonne explication

Si l'on fait le test avec ce bout de code :

Code :

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

1
2
3
var nb1 = new Number(1);
  var nb2 = new Number(1);
  alert(nb1===nb2);

Opera et FF renvoient false
et avec :

Code :

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

1
2
3
var nb1 = 1;
  var nb2 = 1;
  alert(nb1===nb2);

c'est true.

**franculo_caoulene** · 17/06/2009, 18h07

Si on exécute le même gente de test avec document.getElementsByName("c") :

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
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">	
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
  <title>comparer des listes de noeuds</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
  * {margin:0;padding:0;color:#333;}
  body {padding:80px; background:#000;}
  form {margin:0 0 20px 0;padding:10px;width:260px;background:#333;}
  </style>
</head>
<body>
  <form id="f" method="post" action="perdu.html">
    <p><input id="c1" type="checkbox" name="c" value="1" /></p>
    <p><input id="c2" type="checkbox" name="c" value="2" /></p>
    <p><input id="c3" type="checkbox" name="c" value="3" /></p>
  </form>
  <script type="text/javascript">
  <!--
  var ns1 = document.getElementsByName("c");
  var ns2 = document.getElementsByName("c");
  alert(ns1===ns2);
 
  function fn(){alert("");}
  var f1 = new fn();
  var f2 = new fn();
  alert(f1===f2);
  //-->
  </script>
</body>
</html>