Javascript DOM childNodes different avec IE et FF

**SPACHFR** · 23/09/2010, 12h35

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 :

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

**Bovino** · 23/09/2010, 12h48

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

**SPACHFR** · 23/09/2010, 16h07

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 :

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

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 :

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

**SpaceFrog** · 23/09/2010, 16h32

il y a un node cleaner mieux que ça ...

**Bovino** · 23/09/2010, 16h38

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

Code :

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

<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

**SPACHFR** · 23/09/2010, 16h49

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

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

Merci

**SpaceFrog** · 23/09/2010, 17h06

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

passe la page au node cleaner et du coup le deux navigateurs sont d'accord ...

Javascript DOM childNodes different avec IE et FF

JavaScript

Vue hybride

Discussions similaires

Partager

Partager