Discussion :

[thibaut]

Bonjour.

Je suis en train de développer une petite librairie Ajax et je voudrais pour se faire pouvoir transformer du HTML (sous forme de texte) en DOM Html.

Donc j'ai un élément Ajax qui appelle une url. Cette URL me renvoie une page JSP, donc HTML. Dans mon objet Ajax je récupère ce retour, j'aimerai alors pouvoir récupérer une partie de ce retour (limité par un div par exemple ou éventuellement une balise xml) et coller coller cette partie de dans ma page courante (pour mette à jour de façon asynchrone des éléments loudrs de ma page).

J'ai opté pour une solution qui consiterait à découper le retour avec un substr et en plaçant des marqueurs, mais c'est une soltuion qui ne me plait pas trop.

J'aimerai donc parser ce HTML en DOM ou DOM Html. L'idéal serait de pourvoir faire un getElementById sur le DOM et ensuite coller ce sous-élément dans un div cible de ma page (avec un appendChild par exemple).

J'ai essayé la ruse suivante:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
var htmlText = ...;
var tempDiv = document.createElement('div');
var docFrag = document.createDocumentFragment();
 
tempDiv.innerHTML = htmlText ;
 
while (tempDiv.firstChild) {
    docFrag.appendChild(tempDiv.firstChild);
}
 
return docFrag;

mais ça me me satisfait pas : à cause du innerHTML et aussi que je ne peux pas faire de getElementById sur mon docFrag pour récupérer le fils qui m'intéresse.

Si quelqu'un à des éléments ou idées qu'il n'hésite pas à m'en faire part.

Merci pour toute information.
TK

[le_chomeur]

Salut, tout dépend sous quel format tu récupères tes données , mais effectivement en xml ce serait plus pratique a parser exemple :

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
62
63
64
 
    <script type="text/javascript">
//<![CDATA[
      var xmlDoc = "";
    function importXML()
    {
        if (document.implementation && document.implementation.createDocument)
        {
                xmlDoc = document.implementation.createDocument("", "", null);
                xmlDoc.async=false;
                xmlDoc.load("gabarit.xml");
        }
        else if (window.ActiveXObject)
        {
         xmlDoc = new ActiveXObject("Microsoft.XMLDOM")
           xmlDoc.async=false;
           xmlDoc.load("gabarit.xml");
           if (xmlDoc.parseError.errorCode != 0)
                      alert("Error loading XML file : " + xmlDoc.parseError.reason);
                else{}
                      //alert (xmlDoc.xml);
        }
        else
        {
                alert('Your browser can\'t handle this script');
                return;
        }
      getVersion();
    }
 
    function getVersion(){
      test = arborescence(xmlDoc.getElementsByTagName('galeries')[0]);
      //document.getElementById('final').innerHTML =  test;
    }
 
    function arborescence(items){
          temp = "";
          listeGalerie = items.getElementsByTagName('galerie');
          for(var x  = 0 ; x < listeGalerie.length ; x++){
            temp += 'nom : ' + listeGalerie[x].nodeName + '<br />';
            idGalerie = (listeGalerie[x].getElementsByTagName('id')[0].textContent) ? listeGalerie[x].getElementsByTagName('id')[0].textContent:listeGalerie[x].getElementsByTagName('id')[0].text;
            temp += 'id : ' + idGalerie+ '<br />';
            var listImages = listeGalerie[x].getElementsByTagName('image');
            temp += 'Nb Images : ' + listImages.length +'<br />';
          }
          var final = tagName(items);
          document.getElementById('final').innerHTML =  (final);
          return temp;
    }
 
    function tagName(items){
      var temp = '';
      items = items.childNodes;
        for(var i = 0; i < items.length ; i++){
            if(items[i].nodeType != 1) continue;
            valeur = (items[i].textContent) ? items[i].textContent:items[i].text;
            valeur = (items[i].childNodes.length > 1) ? 'parent':valeur;
            temp += items[i].nodeName + ' Valeur : '+valeur+'<br />' ;
            temp += tagName(items[i]);
        }
      return temp;
    }
    //]]>
    </script>

Le script est assez simple a comprendre il me sert a parser un doc xml assez simple :

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
 
<?xml version="1.0" encoding="UTF-8"?>
<galeries>
  <galerie>
    <id>1</id>
    <description>
      <titre>première galerie</titre>
      <auteur>moi</auteur>
      <dateCreation>26/10/2007</dateCreation>
      <theme>animaux</theme>
    </description>
    <images>
      <image>
        <id>1</id>
        <link>blabla</link>
        <description>de l'image</description>
        <taille h="120" w="150" />
        <poid>200ko</poid>
      </image>
      <image>
        <id>2</id>
        <link>blabla</link>
        <description>de l'image</description>
        <taille h="120" w="150" />
        <poid>200ko</poid>
      </image>
        <image>
        <id>3</id>
        <link>blabla</link>
        <description>superbe</description>
        <taille h="120" w="150" />
        <poid>200ko</poid>
      </image>
    </images>
  </galerie>
  <galerie>
    <id>69</id>
    <description>
      <titre>première galerie</titre>
      <auteur>moi</auteur>
      <dateCreation>26/10/2007</dateCreation>
      <theme>animaux</theme>
    </description>
    <images>
      <image>
        <id>1</id>
        <link>blabla</link>
        <description>de l'image</description>
        <taille h="120" w="150" />
        <poid>200ko</poid>
      </image>
      <image>
        <id>2</id>
        <link>blabla</link>
        <description>de l'image</description>
        <taille h="120" w="150" />
        <poid>200ko</poid>
      </image>
    </images>
  </galerie>
</galeries>

voila bon courage pour la suite

[thibaut]

Oui mais je ne peux pas faire autrement que de récupérer du HTML, car je récupére le contenu d'une JSP donc d'une page HTML...

Il faut que je parse du HTML.