Javascript DOM childNodes different avec IE et FF

Version imprimable

Bonjour,

Je réalise des petits tests avec la méthode "childNodes"
(j'essaie de me former au DOM).

J'ai ce petit bout de code ci-dessous qui ce contente de renvoyer le nombre de nœud enfant.
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 HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <script type="text/javascript"> function isExpand(ObjId){ var fils = document.getElementById(ObjId).childNodes; alert(fils.length); for(var a=0;a<fils.length;a++){ alert(fils[a]);} } </script> <style> </style> </head> <body> <div id="prj" onclick="isExpand(this.id);"><img src="./imgs/minus_over3.gif" align="top"<img src="./imgs/folder.gif" align="top">project<br> <div id="sim" style="position:relative;left:15px"> <img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/folder.gif" align="top"/>simul<br> </div> <div id="cpc" style="position:relative;left:30px"> <img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/CPC.gif" align="top"/>cpc<br> </div> <div id="lp1" style="position:relative;left:45px"> <img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/base.gif" align="top"/>lpar<br> </div> </div> </body> </html>
Lorsque j'execute ce code sous IE7, j'obtiens la valeur : 6
sous FireFox j'obtiens la valeur : 11

D'où provient cette différence ?

En plus un truc doit m'échapper car quand j'essaie de compter les noeuds enfants, je ne trouve aucune de ces 2 valeurs mais 7.
2 noeuds images
1 text
1 br
3 div

Merci

23/09/2010, 11h48
Bovino

:faq: : Pourquoi le comportement du DOM est-il différent sous FireFox et IE ?
:roll:

Merci pour le lien.

Pour une fois FF n'est pas terrible sur ce coup là
J'ai suivis le lien sur la gestion des nœuds "vides" et récupéré cette fonction afin de faire le ménage.

Code:

1
2
3
4
5
 
function is_ignorable( nod ) {
  return ( nod.nodeType == 8) || 
         ( (nod.nodeType == 3) && is_all_ws(nod) ); 
}

Retest et j'ai encore une différence.

IE -> 6 childNodes
FF ->7 childNodes (ce qui semble être juste si j'ai bien compris ce que représente un childNodes)

Une petite idée pour expliquer cette différence ?

Le code de test

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function isExpand(ObjId){
var i=0;
var fils = document.getElementById(ObjId).childNodes;
for(var a=0;a<fils.length;a++){
 if(is_ignorable(fils[a])==false){i++;}
}
alert(i);
}
 
/**
 * Determine if a node should be ignored by the iterator functions.
 *
 * @param nod  An object implementing the DOM1 |Node| interface.
 * @return     true if the node is:
 *                1) A |Text| node that is all whitespace
 *                2) A |Comment| node
 *             and otherwise false.
 */
 
function is_ignorable( nod ) {
  return ( nod.nodeType == 8) || // A comment node
         ( (nod.nodeType == 3) && is_all_ws(nod) ); // a text node, all ws
}
 
/**
 * Determine whether a node's text content is entirely whitespace.
 *
 * @param nod  A node implementing the |CharacterData| interface (i.e.,
 *             a |Text|, |Comment|, or |CDATASection| node
 * @return     True if all of the text content of |nod| is whitespace,
 *             otherwise false.
 */
function is_all_ws( nod ) {
  // Use ECMA-262 Edition 3 String and RegExp features
  return !(/[^\t\n\r ]/.test(nod.data));
}
</script>
<style>
</style>
</head>
<body>
<div id="prj" onclick="isExpand(this.id);"><img src="./imgs/minus_over3.gif" align="top"<img src="./imgs/folder.gif" align="top">project<br>
	<div id="sim" style="position:relative;left:15px">
	<img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/folder.gif" align="top"/>simul<br>
	</div>
	<div id="cpc" style="position:relative;left:30px">
	<img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/CPC.gif" align="top"/>cpc<br>
	</div>
	<div id="lp1" style="position:relative;left:45px">
	<img src="./imgs/minus_over3.gif" align="top"/><img src="./imgs/base.gif" align="top"/>lpar<br>
	</div>
</div>
</body>
</html>

23/09/2010, 15h32
SpaceFrog

il y a un node cleaner mieux que ça ...
23/09/2010, 15h38
Bovino

Citation:

Envoyé par SPACHFR

Une petite idée pour expliquer cette différence ?

Oui : IE et FF n'ont pas la même gestion des erreurs dans le code :mrgreen:

Code:

<img src="./imgs/minus_over3.gif" align="top"<img src="./imgs/folder.gif" align="top">

la première balise img n'est pas fermée :fessee:
23/09/2010, 15h49
SPACHFR

:oops: désolé...... pour le tag img c'est vrai que ça marche mieux....
7/7 :ccool:

Un node cleaner mieux, tu peux m'en dire un peu plus. SpaceFrog

Merci
23/09/2010, 16h06
SpaceFrog

http://www.developpez.net/forums/d47...leaner-retour/

passe la page au node cleaner et du coup le deux navigateurs sont d'accord ...
23/09/2010, 17h39
SPACHFR

:merci: