Discussion :

[GDVL]

Bonjour à tous, chers amis développeurs terriens

Je débute dans la manipulation des éléments en javascript à l'aide des méthodes parentNode, childNodes, et autres...

Mon problème ne constitue pas en l'utilisation de ces méthodes, mais dans la manière ou le DOM est interprété en javascript/HTML.

Par exemple, pour ce modèle :

Code :

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

1
2
3
4
5
6
7
<table>
	<tr id="mon_tr">
		<td>Bonjour à tous</td>
		<td>cher amis</td>
		<td>développeurs terriens</td>
	</tr>
</table>

Normalement, si je fais...

Code :

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

alert(document.getElementById("mon_tr").firstChild.firstChild.nodeValue)

... cela devrait me renvoyer "Bonjour à tous"

... malheureusement ce n'est pas le cas, car pour lui (enfin, je teste sous Mozilla, mais bon...), firstChild de "mon_tr" représente... les espaces entre <tr> et <td> !

Si je veux que le premier "enfant" de mon_tr soit le <td>, il faut que je supprime tous les espaces entres les 2 balises, ce qui s'avère un peu gênant pour la lisibilité du code...

Code :

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

1
2
3
4
<table>
	<tr id="mon_tr"><td>Bonjour à tous</td><td>cher amis</td><td>développeurs terriens</td>
	</tr>
</table>

C'est pour cela que je vous pause les questions suivantes (enfin... ) :

- Est il normal du point de vue javascript que les espaces entres des balises (sans contenu, juste des espaces) soit interprété comme un noeud de type texte ?
- Est il préférable de présenter le code de manière indentée ? Qu'en est t'il du DOM W3C ?

J'ai rencontré le problème hier et me demandait pourquoi je ne pouvais pas accéder aux TD facilement, et j'ai "bidouillé" pour que cela fonctionne, mais j'aimerai vraiment apporter une solution avec le meilleur rapport théorie/pratique sur la question

Merci d'avance à tous ceux qui auront eu la patience de lire d'une part et ceux qui répondront d'autre part !

[denisC]

Très bonne question, que j'ai moi même abordée.....

La grande question est de savoir si conceptuellement:
cas 1:

Code :

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

1
2
3
4
 
<tr>
  <td>aa</td>
<tr>

est équivalent à
cas 2:

Code :

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

1
2
 
<tr><td>aa</td><tr>

Pour moi, c'est pareil, sauf que la première forme est plus lisible. Malheuresement, en XML, ben on sait pas bien. Est ce que les espaces et sauts de lignes sont considérés comme CDATA ou pas?

Alors, qu'en est-il des navigateurs: Mozilla (FireFox), mets en place des noeuds CDATA au moindre espace. Ce qui fait que dans le cas 1, <tr> a trois fils, et dans le cas 2, 1 seul. Pas pratique pour un parcours en DOM.
Pour IE, pas de soucis, il vire tout les noeuds textes de ce type, et dans les deux cas tr a un seul fils.

Du point de vue XML, les deux ont raisons, il n'y a pas dans la norme du W3C de décision sur ce point.
En DOM, c'est pareil (merci le W3C). DON propose des fonctions de normalisation (normalize sur un noeud en DOM 2 ou normalizeDocument en DOM 3). Ces fonctions sont implementées dans IE (pour la premiere) et dans Firefox (les deux).
Mais dans tous les cas, elle ne font pas de ménage sur les noeuds texte vide.

La normalisation est le processus de fusion des noeuds textes adjacents, et de suppression des noeuds textes vides. Mais comme personne ne définit ce qu'est un noeud vide, et bien, FireFox considère qu'un noeud avec un espace dedans n'est pas vide.


Les solutions
Bien sur, il existe des solutions, pour parcourir tranquillement ses arbres

La premiere que j'ai vu, ne devrait même pas avoir le nom de solution. C'est ecrire son code comme ça:

Code :

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

1
2
3
4
 
<tr
><td>aa</td
><tr>

Eh oui! les espaces dans les attributs, eux, sont clairements non determinants. Il "suffit" donc de mettre les retour à la ligne dans les balises.... Degueulasse

Autre solution, normaliser à la main:

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
60
61
 
<html>
	<head>
		<title>test sur les listes</title>
		<script type='text/javascript'>
		<!--
			var notWhitespace = /\S/;
 
			var TEXT_NODE;
			try {
				TEXT_NODE = Node.TEXT_NODE;
			} catch(e) {
				TEXT_NODE = 3;
			}
 
			var ELEMENT_NODE;
			try {
				ELEMENT_NODE = Node.ELEMENT_NODE;
			} catch(e) {
				ELEMENT_NODE = 1;
			}
 
			function cleanWhitespace(node) {
				for (var x = 0; x < node.childNodes.length; x++) {
					var childNode = node.childNodes[x];
					if ((childNode.nodeType == TEXT_NODE)&&(!notWhitespace.test(childNode.nodeValue))) {
						node.removeChild(node.childNodes[x]);
						x--;
					}
					if (childNode.nodeType == ELEMENT_NODE) {
						cleanWhitespace(childNode);
					}
				}
			}
 
			function initialize() {
				var innerlist = document.getElementById('inner2');
				alert("taille initiale : " + innerlist.childNodes.length);
				innerlist.normalize();
				alert("taille normalize : " + innerlist.childNodes.length);
				/* document.normalizeDocument(); */
				alert("taille normalizeDocument : " +innerlist.childNodes.length);
				cleanWhitespace(innerlist);
				alert("taille cleanWhitespace : " +innerlist.childNodes.length);
				}
		-->
		</script>
	</head>
	<body onload='initialize();'>
		<ul>
			<li>element 1</li>
			<li>element 2
				<ul id='inner2'>
					<li> element 21</li>
					<li> element 22</li>
				</ul>
			</li>
			<li>element3</li>
		</ul>
	</body>
</html>

Sous IE, ça ne fait rien, et sous FireFox, ca vide tous les noeuds textes constitué d'espace. De cette façon, notre modèle DOM est le même dans les deux navigateurs, et ça permet enfin de faire du DOM qui marche partout. Le script est leger et rapide, c'est la solution que j'ai choissie.

A toi de voir ce que tu preferes, ou de trouver une autre solution 8) 8)

[GDVL]

Wahou !

Tu as du te faire mal à tout taper ! Merci beaucoup ! Je pensai pas avoir soulevé une question aussi existentielle du javascript

Sinon, je pensai plutôt à une fonction javascript récursive que j'appellerai qui me virerait tous les noeuds de type text et dont le "trim" du contenu me renverrait une chaîne vide (que des espaces, donc).

Mais bon, je vais d'abord étudier ta fonction davantage parce qu'il doit y avoir encore des choses que j'ignore.

Encore merci à toi et bonne journée

[denisC]

Fondamentalement, ma fonction fait ce que tu dis, mais en utilisant des expressions régulières plutot que un trim().

Sinon, ce n'est pas existenciel (enfin, pas plus que ça), c'est simplement que j'ai voulu faire des choses en DOM sous FireFox, et que j'ai été confronté à ce problème un moment avant de trouver une solution satisfaisante.

Donc autant t'eviter cette perte de temps

[javatwister]

une alternative à la fonction de denisC 8)

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
function initialize(){
var bal=document.body.getElementsByTagName('*');
 
for(i=0;i<bal.length;i++){
 
var enf=bal[i].parentNode.childNodes;
 
for(j=0;j<enf.length;j++){
 
if(enf[j].childNodes.length==0 && !enf[j].data.replace(/\s+/g,"")){
 
bal[i].parentNode.removeChild(enf[j])
 
}
} 
}
 
}

[zefrit]

Salut,

je tombe un peu tardivement sur ce dernier post et j'ai ajouter la fonction initialize() de javatwister mais j'ai une erreur sous IE, qui dit que data est null. ça ne fonctionne pas sous firefox (j'ai mon javascript activé)

Voilà a+

[zefrit]

jreviens sur mon post car j'ai trouvé les fonctions dans la FAQ et j'ai pris la dernière version, mais cela ne marche tjr pas sur FireFox (1.0.6)

Voilà