Javascript DOM childNodes different avec IE et FF

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

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, 11h48

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

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

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, 15h32

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

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

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, 15h49

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, 16h06

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