Comparaison de NodeList sous différents navigateurs

Version imprimable

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:

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

17/06/2009, 17h18
SpaceFrog

à tout hasard Opéra ne rajoute pas un input type submit par defaut ?
ou un truc du genre ?
as tu comparé les length ?
17/06/2009, 17h26
franculo_caoulene

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.
17/06/2009, 17h29
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 :koi:
17/06/2009, 17h31
le_chomeur

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
17/06/2009, 17h36
Bovino

@le_chomeur : non, le résultat est identique avec == !
17/06/2009, 17h42
franculo_caoulene

Citation:

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

Ça n'a pas l'air, j'essaie d'utiliser Dragonfly, mais c'est pas gagner.
17/06/2009, 17h45
Bovino

Précision, ce comportement étrange apparait aussi avec Chrome et Safari !
17/06/2009, 17h48
franculo_caoulene

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.
17/06/2009, 17h48
nod__
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:

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 :D 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…
17/06/2009, 17h59
Bovino
Oui, il semble que ce soit la bonne explication ;)
Si l'on fait le test avec ce bout de code :
Code:

1 2 3 var nb1 = new Number(1); var nb2 = new Number(1); alert(nb1===nb2);
Opera et FF renvoient false
et avec :
Code:

1 2 3 var nb1 = 1; var nb2 = 1; alert(nb1===nb2);
c'est true.

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

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

Opera, Safari, et FF retournent "faux", IE persiste et signe et retourne "vrai". Pour le coup, FF n'est pas constant.

Citation:

Envoyé par nod__

Opera et Webkit retournent une nouvelle instance de l'objet NodeList.

C'est probablement ça.

17/06/2009, 18h09
franculo_caoulene

Bon ben merci à tous, ce fut très instructif. Je vais finalement virer ce test de mon code.