DOM - naviguer dans un XML en javascript

Version imprimable

Salut,

voilà, j'ai un objet XML (classiquement un responseXML issue d'un XMLHttpRequest qui marche bien)
mon XML ressemble à celà :
Code:

1 2 3 4 5 <?xml version="1.0" encoding="UTF-8" standalone="yes" ?> <list> <tel><nom>abcdef</nom><id>123</id></tel> <tel><nom>xyz</nom><id>124</id></tel> </list>
(bien sur avec plus de 2 "nom".
je me suis dis que j'allais parcourir mon XML avec le DOM en recherchant le noeud <list> puis en parcourant ses fils (des <tel>) et en recuperant les nom et id de chacun... mais voilà ca ne marche pas (rien ne se passe sous IE et FFx)
voici mon code :
Code:

1 2 3 4 5 6 7 8 9 10 var root_node=xmldoc.getElementsByTagName('list')[0]; alert('root:'+root_node+ 'n:'+root_node.childNodes.length); // donne qqchose ok for (j=0;j<root_node.childNodes.length;j++) { alert(j+' -> '+root_node.childNodes[j].childNodes.length); // donne zero !!!, devrait donner 2 ? nom=root_node.childNodes[j].childNodes[0].nodeValue; // le nom id=root_node.childNodes[j].childNodes[1].nodeValue; // l'ID alert(j+' n:'+nom+' id:'+id); // rien ne s'affiche là... }
voilà, si vous pouvez m'aider, ca fait 2 heures que je tourne en rond.

merci d'avance.

02/11/2005, 16h36
Mr N.

Juste pour dire que ton xml est mal formé : <tel>...</nom>
02/11/2005, 16h40
hpfx

Citation:

Envoyé par Mr N.

Juste pour dire que ton xml est mal formé : <tel>...</nom>

non, c'etait juste une erreur de frappe ici dans le forum. que j'ai corrigé depuis, en fait le xml est bien :) (au moins ca j'en suis sûr) :)
02/11/2005, 16h40
SpaceFrog

personnellement je me méfie de la différence d'interprétation des childNodes entre IE et FFX qui oblige souvent à utiliser un nodeCleaner, du coup j'attaque un peu plus violemment :

Code:

alert(root_node.getElementsByTagName('tel').length)

Sous Fx :

Code:

1
2
3
4
5
6
7
8
9
<list><tel><nom>abcdef</nom><id>123</id></tel><tel><nom>xyz</nom><id>124</id></tel></list>
<script>
var root = document.getElementsByTagName('list')[0];
for(i = 0 ; i < root.childNodes.length ; i++) {
   nom = root.childNodes[i].childNodes[0].firstChild.nodeValue;
   id  = root.childNodes[i].childNodes[1].firstChild.nodeValue;
   alert(nom+' : '+id);
}
</script>

Par contre c'est quoi le nodeCleaner ?

02/11/2005, 17h02
SpaceFrog

le node cleaner permet de supprimer certains nodes generes pas firefox ...
ça scanne les nodes et vire les textnodes inutiles ...

un simple teste du nombre de nodes et de childNodes sur une page en comparatif entre firefox et IE t'en diras bien plus ...

par exemple dans un table ...

Citation:
Envoyé par Mr N.
Sous Fx :
Code:

1 2 3 4 5 6 7 8 9 <list><tel><nom>abcdef</nom><id>123</id></tel><tel><nom>xyz</nom><id>124</id></tel></list> <script> var root = document.getElementsByTagName('list')[0]; for(i = 0 ; i < root.childNodes.length ; i++) { nom = root.childNodes[i].childNodes[0].firstChild.nodeValue; id = root.childNodes[i].childNodes[1].firstChild.nodeValue; alert(nom+' : '+id); } </script>
Oups, au debut j'avais fait un copier/coller direct et j'avais oublié que tu avais "document." au debut de ton code.

bon, voilà j'ai testé en mettant xmldoc (ma variable)

voici donc le resultat :
* sous FFx : erreur : root.childNodes[i].childNodes[0] has no properties

* sous IE : erreur : childNodes à la valeur null ou n'est pas objet

donc ca ne marche pas.

PS :en fait ta solution est la même que la miene avec le "firstChild" en plus.

02/11/2005, 17h19
Mr N.

Bon chez moi ca marche mais suit plutot les conseils de la grenouille de l'hyper-espace qui sont plus fiables :lol:
02/11/2005, 17h23
SpaceFrog
le problème vient du fait qu'IE n'interpète pas list comme étant une balise ...
il n'arrive pas à trouver la balise fermante ...
Code:

1 2 var root = document.getElementsByTagName('list')[0]; alert(root.outerHTML)

Citation:

Envoyé par SpaceFrog

personnellement je me méfie de la différence d'interprétation des childNodes entre IE et FFX qui oblige souvent à utiliser un nodeCleaner, du coup j'attaque un peu plus violemment :

Code:

alert(root_node.getElementsByTagName('tel').length)

Salut, j'ai testé... ouais j'ai bien un resultat (il me donne le nombre de "tel") super... mais apres... j'ai essayé de suivre l'exemple en faisant comme ceci :
Code:

1 2 3 4 5 6 7 8 9 var root_node=xmldoc.getElementsByTagName('list')[0]; var nb=root_node.getElementsByTagName('nom').length; alert('nombre de tel:'+nb); for (j=0;j<nb;j++) { alert(root_node.getElementsByTagName('nom')[j].nodeValue); alert(root_node.getElementsByTagName('id')[j].nodeValue); }
j'ai bien un alert pour le nb qui me donne une valeur (qui me semble correcte)...
mais ca ne marche pas.... les alert me renvoie null pour le nom et les id !

02/11/2005, 17h28
hpfx
Citation:
Envoyé par SpaceFrog

le problème vient du fait qu'IE n'interpète pas list comme étant une balise ...
il n'arrive pas à trouver la balise fermante ...

Code:

1 2 var root = document.getElementsByTagName('list')[0]; alert(root.outerHTML)
le alert(root.outerHTML) me donne undefinned sous FFx et plante sous IE (objet requis)
en fait je ne comprends pas ce que c'est que ce probleme ? cela viens t'il du nom de la balise que j'ai choisie (list) faut'il en prendre une autre ????

:idea: (pas testé de chez pas testé)

Code:

1
2
3
4
5
6
7
 
var liste = xmldoc.getElementsByTagName('list')[0];
var tels = liste.getElementsByTagName('tel');
for (i = 0 ; i < tels.length ; i++) {
   nom = tels[i].getElementsByTagName('nom');
   ...
}

:roll:

02/11/2005, 18h07
hpfx
Citation:
Envoyé par Mr N.

:idea: (pas testé de chez pas testé)

Code:

1 2 3 4 5 6 7 var liste = xmldoc.getElementsByTagName('list')[0]; var tels = liste.getElementsByTagName('tel'); for (i = 0 ; i < tels.length ; i++) { nom = tels[i].getElementsByTagName('nom'); ... }

:roll:
ca dois pas être bien loin.. quand je vais un alert(nom) ca me donne Object HTMLCollection

et sous IE : bah, ca plante, mais j'en suis plus là...

s'il vous plait, j'ai plus un neurone là, j'ai passé un temps dingue sur des doc en anglais, je suis noyé...
merci.

SOS, quand je fais (FFx) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
   alert(tels[i].getElementsByTagName('nom')[0].nodeValue);
   // donne "null"
 
  alert(tels[i].getElementsByTagName('nom')[0]);
   // donne "Object Element"
 
  alert(tels[i].getElementsByTagName('nom'));
   // donne "HTMLObject Collection"
 
  alert(tels[i].getElementsByTagName('nom').nodeValue);
   // donne "undefined"
 
  alert(tels[i].getElementsByTagName('nom').data);
   // donne "undefined"
 
  alert(tels[i].getElementsByTagName('nom').firstChild);
   // donne "undefined"

voilà, je suis perdu... comment je choppe le contenu de mon tag alors moi ?
merci...

02/11/2005, 18h55
Mr N.
Code:

1 2 3 4 nom = tels[i].getElementsByTagName('nom')[0]; for (i in nom) { alert(i+' : '+eval('nom.'+i)); }
Ca te permettra d'avoir toutes les propriétés/fonctions sur l'objet nom (sous Fx en tout cas)...
bon clic
02/11/2005, 21h20
hpfx

Merci Mr N.
cette asctuce vaut de l'or !
justement je me demandais au moment de poster ce message comment connaitre la liste des toutes les proprietes (il dois bien y avoir un site de reference si possible en francais) mais là avec cette astuce c'est encore mieux car c'est dynamique. aussi puissant que le concept DOM inspector de FFx ! (le jour ou je l'ai decouvert ca a revolutionné ma vie :) )

merci.
je donnerais (demain) la reponse a ma question ... si je la trouve (pour ceux que ca interresse).

PS : et si qqun connais un bon site de reference pour le javascript, ej suis quand même preneur hein...
03/11/2005, 08h28
Mr N.

Bien sur que tu dois donner ta réponse... pense aux autres qui auraient les mêmes difficultés !

voilà la reponse :
Code:

1 2 3 4 5 6 7 8 var liste = xmldoc.getElementsByTagName('list')[0]; var tels = liste.getElementsByTagName('tel'); for (i = 0 ; i < tels.length ; i++) { nom = tels[i].getElementsByTagName('nom')[0].childNodes[0].nodeValue; id = tels[i].getElementsByTagName('id')[0].childNodes[0].nodeValue; alert(id+' '+nom); }
mais ca ne marche QUE sous FireFox.
Je vais essayer de faire marcher celà sous IE (si qqun a une idée je suis preneur hein)

C'est quand même bien tordu...

merci de votre aide.

03/11/2005, 09h17
Mr N.
Solution de contournement (pour pas dire facilité) : passe par les attributs ;)
Code:

1 2 3 4 5 6 <list> <tel nom="Dupond" id="66" /> <tel nom="Dupont" id="33" /> ... </list>
03/11/2005, 09h33
hpfx
Citation:
Envoyé par Mr N.

Solution de contournement (pour pas dire facilité) : passe par les attributs ;)

Code:

1 2 3 4 5 6 <list> <tel nom="Dupond" id="66" /> <tel nom="Dupont" id="33" /> ... </list>
T'es fou (*) déjà que j'ai eu du mal a chopper les TAG, les attribus j'y pense même pas.... je ne connais même pas la fonction alors.... :D
en plus au debut j'y avais pensé, mais je m'etais dis que ca serait plus difficile ! :wink:

(*) tu me permettra cette familiarité :)

merci de ton aide.

Citation:

Envoyé par hpfx

T'es fou (*) déjà que j'ai eu du mal a chopper les TAG, les attribus j'y pense même pas.... je ne connais même pas la fonction alors.... :D
Code:

1 2 getAttribute/setAttribute
Pour intervenir sur le début du problème (avec quelque peu de retard):
Il y en effet comme le dis SP une différence fondamentale d'interprétation du DOM entre IE et FFx.

Ainsi, le document:

Citation:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<list>
<tel><nom>abcdef</nom><id>123</id></tel>
<tel><nom>xyz</nom><id>124</id></tel>
</list>

Correspond à l'arbre DOM (sous IE):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 |--list |--tel | |--nom | | |--"abdcef" | |--id | |--"123" |--tel |--nom | |--"xyz" |--id |--"124"
qui est l'arbre DOM attendu.
Alors que sous FFx, l'arbre est le suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |--list |--" " |--tel | |--nom | | |--"abdcef" | |--id | |--"123" |--" " |--tel | |--nom | | |--"xyz" | |--id | |--"124" |--" "
La différence n'est pas énorme, mais dés que tu fais un:

Citation:

root_node.childNodes[j].childNodes.length

pour j=0, ça retourne un undefined dans FFx car le premier noeud est un noeud texte.

D'ou tout ton problème.

Une solution est effectivement d'utiliser un "node cleaner" qui est un programme qui va detecter ces noeuds textes ne contenant que des blancs et le supprimer.

Bonne chance!!

Citation:
Envoyé par denisC
Alors que sous FFx, l'arbre est le suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |--list |--" " |--tel | |--nom | | |--"abdcef" | |--id | |--"123" |--" " |--tel | |--nom | | |--"xyz" | |--id | |--"124" |--" "
La différence n'est pas énorme, mais dés que tu fais un:

Citation:

root_node.childNodes[j].childNodes.length

pour j=0, ça retourne un undefined dans FFx car le premier noeud est un noeud texte.

D'ou tout ton problème.

Bonne chance!!
ok,
bon, c'est un peu balez tout ca pour moi.
je comprends donc pouquoi il faut parcourir les 'tel' et le 'id', plutot que passer par childNodes[]...
mais par contre ca n'explique pas pourquoi le code qui marche sous FFx ne fonctionen pas lui sous IE ?
pour rappel, le voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 if (xmldoc.getElementsByTagName('list')[0].getElementsByTagName('tel').length==0) { Fct_noentry(); return; } var liste = xmldoc.getElementsByTagName('list')[0]; var tels = liste.getElementsByTagName('tel'); for (i = 0 ; i < tels.length ; i++) { nom = tels[i].getElementsByTagName('nom')[0].childNodes[0].nodeValue; id = tels[i].getElementsByTagName('id')[0].childNodes[0].nodeValue; Fct_ligne(nom,id); }
en gros, est-il plus simple de corriger mon code actuel pour qu'il marche aussi sous IE. ou faut-il mieux faire un code qui parcour les nodes de <list> en prenant soin de ne pas lire les nodes " " (chaine vide) ? (ou utilisant un node cleaner)

quest-ce qu'il y a de mieux ?
ou si qqun peu me donner le code pour parcourir cet arbre sous IE (je peux au pire faire une fonction pour IE et une pour FFX ? ou au mieux essayer de fusionner les 2 )

merci.

PS: et grace a ton explication, j'ai compris pourquoi j'ai eu du mal quand j'ai voulu tester s'il y avait un fils "tel" dans "list", voir ce que j'ai du faire à la 1ere ligne de mon code... quand je vois celà ca fait froid dans le dos :)

03/11/2005, 15h33
SpaceFrog

javatwister à du coller un script de nodecleaner dans la faq ...
un petit coup de node cleaner avant de lancer ta fonction de parsage...
03/11/2005, 15h41
hpfx

Citation:

Envoyé par SpaceFrog

javatwister à du coller un script de nodecleaner dans la faq ...
un petit coup de node cleaner avant de lancer ta fonction de parsage...

dans la FAQ javascript (http://javascript.developpez.com/faq/) ?
j'ai pas trouvé. J'ai jeté un coup d'oeuil avant de poster ici mais a par de grosse generalité, j'ai pas vu. :cry:
03/11/2005, 16h13
denisC

Citation:

Envoyé par hpfx

dans la FAQ javascript (http://javascript.developpez.com/faq/) ?

Dans le projet de FAQ

Tu as ma méthode (orientée DOM) et la méthode de JT (orientée JT). Il soutiens que la sienne va plus vite, ce que je ne peux démentir. Mais au moins la mienne, je comprends comment elle fonctionne :P
03/11/2005, 17h23
hpfx

Citation:

Envoyé par denisC

Dans le projet de FAQ

Interressant.. pas facile pour qqun qui n'est pas un expert.
bon en fait vous vous êtes concentré sur le nettoyage, ok. mais dans le tutorial, (une fois le nettoyage réalisé) il manque je trouve un petit exemple de parcours d'arbre... enfin voilà quoi. je vais etudier vos sources.

j'ai encore une vrai question : voilà, je recupere mon objet xml grace a un XMLHttpRequest avec un truc du genre :

Code:

var xmldoc=http_req.responseXML

mais voilà, pour effectuer des test, c'est la galere (a chaque fois, j'upload le vais dans le navigateur je recharge la page, je saisie qqchose dans un champ... enfin c'est lourds...
je voulais savoir y a t'il a un moyen de mettre directement dans le code javascript un exemple de xml, un peu comme celà :

Code:

var xmldoc="<list><tel><nom>abc</nom><id>123</id></tel><tel>.....";

vous voyez ce que je veux dire ?

ou p'tre mettre directment mon <list> dans le body et y faire un truc genre var xmldoc=document.getElementById ??? non ???

merci d'avance.
03/11/2005, 17h50
denisC

Citation:

Envoyé par hpfx

je voulais savoir y a t'il a un moyen de mettre directement dans le code javascript un exemple de xml, un peu comme celà

Intéressante comme question. Je ne sais pas si tu peux créer un document DOM dans ta page.

Tu peux certainement créer un élement XML dans ta page web (en l'insérant dans un div caché de ta page par exemple), ou tu peux le créer dynamiquement en JS avec les méthodes DOM (createElement et autre). A toi de voir si ça vaut le coup...

tiens, en passant, voici une petite fonction que j'ai pondu :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function affinfo(obj,nom) { c='<br /><u>'+nom+'</u><ul>'; for (i in obj) { try{ c=c+'<li>'+nom+'.'+i+' : '+eval(nom+'.'+i)+'</li>'; } catch(e) {c=c+'<li>ERR '+nom+'.'+i+' '+e.description+'</li>';} } c=c+'</ul>'; document.write(c); }
completement basé sur le code (voir plus haut) donné par Mr N.
cette fonctionne affiche les propriete d'un element, pratique quand on a pas de DOM inspector (IE)

ca s'utilise comme celà :
Code:

1 2 3 // j'ai un objet : truc affinfo(truc,'truc');
j'espere que ca peux aider.
est-ce que ca peux trouver sa place dans la FAQ (a coté des codes de nettoyage) ?
bien sur on peut remplacer le write par un return et renvoyer le commentaire à la fonction appelante pour un usage differents... a vous de voir.

Citation:

Envoyé par denisC

ou tu peux le créer dynamiquement en JS avec les méthodes DOM (createElement et autre). A toi de voir si ça vaut le coup...

une âme charitable capable de me pondre le JS qui crée ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 |--list |--tel | |--nom | | |--"abdcef" | |--id | |--"123" |--tel |--nom | |--"xyz" |--id |--"124"
sivousplait....

ouais parceque déjà j'arrive pas a le parcourir (j'y travaille justement) mais en plus si je dois le créer, je ne suis pas sur d'y arriver.
d'un autre coté il vaut mieux partir sur de bonnes bases et être SUR a 100% de mon objet xml, et donc que ca soit fait par qqun qui sait faire. (promis je donnerais la fonction de lecture qui marche dans FFx et IE)

donc, un grand merci a celui qui prendra son courage a deux main pour m'aider.

Citation:

Envoyé par hpfx

une âme charitable capable de me pondre le JS qui crée ceci :

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
 
function createXMLDoc() {
    if (document.implementation && document.implementation.createDocument) {
        var xmldoc = document.implementation.createDocument("", "list", null);
        xml_root = xmldoc.documentElement;
    }
    else if (window.ActiveXObject) {
        var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
        xml_root = xmldoc.createElement("list");
        xmldoc.appendChild(xml_root);
    }
    xml_tel1 = xmldoc.createElement('tel');
    xml_root.appendChild(xml_tel1);
    xml_nom1 = xmldoc.createElement('nom');
    xml_tel1.appendChild(xml_nom1);
    xml_nom1.appendChild(xmldoc.createTextNode('abcdef'));
    xml_id1 = xmldoc.createElement('id');
    xml_tel1.appendChild(xml_id1);
    xml_id1.appendChild(xmldoc.createTextNode('123'));
    xml_tel2 = xmldoc.createElement('tel');
    xml_root.appendChild(xml_tel2);
    xml_nom2 = xmldoc.createElement('nom');
    xml_tel2.appendChild(xml_nom2);
    xml_nom2.appendChild(xmldoc.createTextNode('xyz'));
    xml_id2 = xmldoc.createElement('id');
    xml_tel2.appendChild(xml_id2);
    xml_id2.appendChild(xmldoc.createTextNode('124'));
    return xmldoc;
}

Testé et approuvé dans FFx, testé dans IE: ça ne fait pas de bug, mais je n'ai pas réussi à vérifier le document en entier (trop long...)

Bonne chance :wink:

05/11/2005, 15h42
siddh

salut,
je me suis bien casser la tete sur un probleme similaire en utilisant le xmlhttprequest ;)
pour ie en fait il faut d abord accéder au documentElement de ton responseXml.
Apres tu pourras faire tes get...
A savoir aussi que les elements n ont pas les memes propriétés et méthodes si tu es dans ff ou ie.
06/11/2005, 13h33
hpfx

Citation:

Envoyé par siddh

salut,
je me suis bien casser la tete sur un probleme similaire en utilisant le xmlhttprequest ;)
pour ie en fait il faut d abord accéder au documentElement de ton responseXml.
Apres tu pourras faire tes get...
A savoir aussi que les elements n ont pas les memes propriétés et méthodes si tu es dans ff ou ie.

merci, je galere comme pas possible (j'ai pas pu y consacrer plus d'une demin journée vendredi), et ce malgres l'aide de denisC et de son script.
mais a force de perceverer je vais y arriver.
merci pour ton conseil.
apparement ce qui marche avec le document xml du script de denisC ne marche pas avec le vrai jeu de test (renvoyé par le serveur) et pourtant j'ai modifié ma fonction pour quelle renvoie excatement le xml de l'exemple (même au niveau des retours chariots)

d'ailleur j'ai trouvé comment eviter d'avoir besoin d'un nodecleaner pour firefox : il ne faut pas faire de retour à la ligne entre les tags (xml).
Les retours a la ligne sont interpreté comme un node texte par fairefox (pourquoi pas apres tout). donc voilà c'est une information que j'espere aidera certains. (et dire que j'avais volontairement ajouté ces retours à la ligne pour faire qqchose de lisible! sic)

Je vous tiendrai au courant...
07/11/2005, 09h03
denisC

Citation:

Envoyé par hpfx

d'ailleur j'ai trouvé comment eviter d'avoir besoin d'un nodecleaner pour firefox : il ne faut pas faire de retour à la ligne entre les tags (xml)

J'avais en effet oublié de préciser, mais ces noeuds vide n'apparaissent pas par hasard. Il apparaissent là ou existent des caractères blancs (comme le retour chariot).

Et effectivement, le comportement de FireFox est compatible avec la norme XML du W3C.
08/11/2005, 22h21
hpfx

Bon, voilà apres 2 jours de recherche je dois baisser les bras.
pour IE, je n'utilise pas le XML (en esperant que dans IE7 on puisse se rapprocher de la syntaxe FFx) dans le cas d'IE mon service web (php) ne renvoie pas du xml, mais plutot du simple texte avec separateur, en JS il ne reste qu'a spliter totu ca... (je sais c'est nul)
voilà j'avais promis de vous donner des nouvelles....

une question en fouillant sur ce site hier soir, je suis tombé par hazard sur un lien d'une page ou etait detaillé les different TAG xhtml. c'etait bien fais car pour chaques tag, il y a les parent possible et les enfants possible (et surtout en rouge les enfants obligatoire) malheuresement j'ai oublié debookmarquer le site... je ne le retrouve pas. si qqun connais... merci.
08/11/2005, 22h29
siddh

il y a une reference xhtml sur zvon.org mais je penses pas que ce soit ca.
par contre le site vaut le deplacement si tu le connais pas.
08/11/2005, 22h34
hpfx

Citation:

Envoyé par siddh

il y a une reference xhtml sur zvon.org mais je penses pas que ce soit ca.
par contre le site vaut le deplacement si tu le connais pas.

ouais, http://zvon.org/xxl/xhtmlReference/Output/index.html
c'est axactemetn le même concept, bon le site etait plus joli, et surtout il y avait pas de pub.

mais je ne vais pas faire la fine bouche, ce site ira tres bien.

merci
08/11/2005, 22h43
siddh

oui zvon c est moche c est vrai mais tellement complet !
t as aussi les refs dom 2, css 2 ...

apres t as aussi http://www.w3schools.com/

Fuseau horaire GMT +2. Il est actuellement 15h53.