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: