[Résolu]DOM et nombre d'enfants

Bonjour
J'essaie de comprendre comment fonctionne le DOM (je suis sous FF en xhtml strict).
Pour cela j'ai tout simplement écrit ce qui suit

<table id="tab">
<tbody>
   <tr>
       <td>Ligne 0 Cellule 0</td>
       <td>Ligne 0 Cellule 1</td>
   </tr>
   <tr>
       <td>Ligne 1 Cellule 0</td>
       <td>Ligne 1 Cellule 1</td>
   </tr>
   <tr>
       <td>Ligne 2 Cellule 0</td>
       <td>Ligne 2 Cellule 1</td>
   </tr></tbody>
</table>

puis en JS

	var tableau = document.getElementById("tab");
	if (tableau.hasChildNodes()){
		
		tr = tableau.childNodes;
		alert("le noeud tableau a "+tr.length+" enfants");
		for (i=0; i < tr.length; i++){
			alert("enfant "+i+" " +tr[i].nodeType+" "+tr[i].nodeName);
			if (tr[i].nodeType==3) alert("donnees "+tr[i].nodeValue);
			if (tr[i].hasChildNodes()){
				enfant = tr[i].childNodes;
				alert("le noeud enfant a "+enfant.length+" enfants");
			}
			else
				alert("pas d enfants");
		}
	}
	else
		alert("hello");

Le résultat est surprenant. Dans cette configuration, le tableau a 3 enfants : un teste, tbody et 1 text (!!)
mais si j'écris <table id="tab"><tbody> sur la même ligne alors le tableau n'a plus que 2 enfants : tbody et un texte.
Est ce normal ? Si non où est mon erreur ?
Merci par avance[/i][/i][/i][/i][/i][/i]
Modifié par coucou (26 Jan 2007 - 18:36)

Y'a pas d'erreur. Pour le code suivant :

<table>
  <tbody></tbody>
</table>

Il y a effectivement trois enfants comme tu as pu le voir :
- 1 texte : le retour chariot après <table>, puis les deux espaces avant <tbody>
- 1 tbody
- 1 text : le retour chariot après </tbody>

Maintenant si t'écris ça :

<table><tbody></tbody>
</table>

Y'a plus que deux enfants :
- 1 tbody
- 1 texte : le retour chariot après </tbody>

oui mais sous IE le nombre d'enfants correspond mieux à la réalité : tableau n'a qu'un enfant. C'est un peu embêtant cette histoire.!!

Malheureusement non, sous IE ça ne correspond pas à la réalité Même si c'est plus pratique, il faut tout de même considérer les espaces, tabulations et retour chariots, sachant que leur comportement est défini et bien particulier. Maintenant si tu veux itérer dans un élément, le mieux est de tester le type d'enfant, si c'est un bien un HTMLElement par exemple, alors ça roule.

On constate aussi autre chose, c'est que fouiller dans un document avec le DOM est bien relou, il faudrait vraiment un support de l'xPath dans les navigateurs, ça simplifierait grandement la vie...

Petit problème récurrent en effet.
Qui peut-être solutionné avec cette technique décrite en milieu de page : Whitespace Nodes.

...

bonjour !

... ou bien dutiliser les méthodes getElementById et TagName plutot
qu'une liste ( childNodes) , celle-ci étant aléatoire ( le rajout d'un noeud et le code
JS tombe à l'eau ) .

Meme "probleme" (!) lors de l'analyse de document SVG (scalable vector graphique).
++
Modifié par kzone (14 Nov 2006 - 11:39)

A mon avis, on s'aperçoit assez rapidement que les accès directs par firstChild/lastChild/childNodes ne sont finalement que très peu utilisés. La faute à ces deux interprétations différentes mais justifiables toutes les deux.
Un autre élément peut également poser problème dans le parcours, c'est l'utilisation d'entités comme &&euro; ils créent un noeud DOM spécifique. Donc on modifie le texte, et le script partirait en c***.

IL y a très peu de cas où on ne peut finalement pas opter pour getElementById/ElementsByName/ElementsByTagName.
Rappelons à toutes fins utiles que ces fonctions sont accessibles à partir de n'importe quel noeud DOM et non pas uniquement le document comme beaucoup le croient encore.

salut !

a écrit :

Donc on modifie le texte, et le script partirait en c***.

en colonie ?

++

a écrit :

en colonie ?

J'adore jouer au mastermind ... sans compter le c initial, il y a deux lettres mal placées et deux correctes sur un total de 5