[Javascript] Création, mise à jour, etc d'un noeud DOM - Version imprimable

[Javascript] Création, mise à jour, etc d'un noeud DOM - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Javascript] Création, mise à jour, etc d'un noeud DOM (/showthread.php?tid=3051)

Pages : 1 2

[Javascript] Création, mise à jour, etc d'un noeud DOM - Ter Rowan - 14-09-2008

J'espère que je vais être à peu près clair ^^

Je développe avec Ajax, et, de fait, je me retrouve à devoir faire souvent des mises à jour du DOM.

ces mises à jour concernent le plus souvent un élément d'une liste avec image :

Code PHP :
<?php 

<ul id="cible">

<li id='idAManipuler><a href=...><img src=..../></a></li>

...

...

</ul>

la cible du traitement ajax est le li

sur cette cible je peux faire :

- la suppression du li (sauf que ce n'est pas une vraie suppression, le li n'est plus fils du ul mais il existe quelque part... dans les limbes)

- la modification de ses "fils" (le contenu du href, de la source de l'image...)

- la création d'un li du même genre

grosso modo, en algo ça donne

mon ordre ajax renvoie une nouvelle liste des li à afficher dans l'ul cible
une fonction javascript traite l'ul cible :
1) suppression de tous les li de l'ul cible(ces li partent dans les limbes)
2) parcours de la nouvelle liste
si l'id existe (donc dans les limbes) je le pose en fils de l'ul
si l'id n'existe pas ( getElementById ne renvoie rien), je le crée puis ses fils (le A et le IMG)

3) éventuellement modification du herf de la source si différence il y a

donc tout ça c'est merveilleux ça marche... mais je me demandais, est ce que le mieux n'est pas de faire un bête innerHtml du ul et basta, sans me prendre la tête et le processeur client à tout tester dans tous les sens...

Y a peut être une autre solution, mais je ne vois pas trop...

Avez vous une idée ?

RE: [DOM JAVASCRIPT] création, mise à jour, etc d'un noeud du DOM - Sephi-Chan - 14-09-2008

À toi de voir si tu veux faire ça proprement ou non. Smile

Smile

Sephi-Chan

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Ter Rowan - 14-09-2008

bah la question est aussi ... est ce que c'est si crade que ça le innerhtml...

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Sephi-Chan - 14-09-2008

Je te redirige vers quelques billets :

Personnellement, je suis pour l'injection propre du DOM : innerHTML fonctionne bien mais ce n'est pas fait dans les règles de l'art.

Sephi-Chan

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Hakushi - 15-09-2008

De toute facon, il est certain que de l'injection DOM sera bien plus propre qu'un innerHTML.

Dans les faits, je suis un grand pretre venerateur de JQuery Big Grin

Big Grin

, et je conseille toujours de jeter un coup d'oeil a JQuery, c'est 50kb (20kb gzip) de pur bonheur :

Code :
$('#mon_div').add('img');

$('#mon_div img').attr({ 

          src: "/images/lol.gif",

          title: "LoL",

          alt: "Image drole"

        });

http://docs.jquery.com/Tutorials

Par exemple.

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Ter Rowan - 16-09-2008

bah perso j'utilise prototype, et il a aussi une méthode "add"

sur le papier c'est bien propre mais en réalité, en rentrant dans la librairie j'ai vu qu'il manipulait le innerHTML ^^

du coup, j'ai fait un mix :

mon côté serveur envoie du xml bien propre (avec des balises à moi)
mon côté client interprète le code dans une fonction générique, en fait (bouh pas beau) un morceau html et l'envoie à prototype

ainsi, si jamais un jour, je veux faire plus propre, je n'aurais qu'à modifier une seule fonction Smile

Smile

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Sephi-Chan - 16-09-2008

Pourquoi ne pas envoyer du JSON plutôt que du XML ? Ça t'évite de l'interpréter puisque tu peux l'utiliser directement avec Javascript.

Effectivement jQuery utilise innerHTML. D'ailleurs, la majorité de leurs commentaires soulignent un problème avec IE quand il parlent de innerHTML. :p

Je pense toutefois que DOM va bientôt complètement remplacer innerHTML puisqu'il est de mieux en mieux supportés d'après ce que je lis sur le sujet. Les lenteurs de DOM semblent provenir du fait qu'une page n'est pas lue comme un document XML à part entière (à moins d'utiliser XHTML 1.1, qui est parfois mal supporté).

Sephi-Chan

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Ter Rowan - 16-09-2008

Sephi-Chan a écrit :Pourquoi ne pas envoyer du JSON plutôt que du XML ? Ça t'évite de l'interpréter puisque tu peux l'utiliser directement avec Javascript.

j'ai commencé en XML avant de découvrir l'existence de JSON ^^ et j'ai une fonction générique qui traite l'ensemble des interactions Ajax de modification de ma page web.

Du coup ça ferait beaucoup de boulot pour pas grand chose. En effet, j'ai besoin de peu de lignes de code pour l'interprétation que je fais de mon XML

et puis sait on jamais mon retour xml pourrait très bien être utilisé à terme sur autre chose que du javascript Smile

Smile

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Sephi-Chan - 16-09-2008

L'autre chose proposera sans-doute un parser JSON. Wink

Wink

Okay pour l'utilisation de XML, ce n'était que pour te proposer une alternative. Wink

Wink

Sephi-Chan

RE: [Javascript] Création, mise à jour, etc d'un noeud DOM - Wells - 16-09-2008

Voici une débat trés intéréssant. cependant j'avoue nager un peu et j'imerais avant toute remarque etre sur de bien comprendre de quoi il s'agit.

J'aimerais donc si possible qu'on me donne l'équivalent de ceci en DOM:

Code PHP :
<?php 

XXX.innerHTML='<div class="content">

    <div class="page">

                <ul class="menu1">

            <li><a href="../" rel="nofollow">Accueil</a></li>

            <li><a href="../news.php">News</a></li>

            <li><a href="../decouvrir.php">Découvrir le jeu</a></li>

            <li><a href="../REGLES">Regles / faq</a></li>

            <li><a href="../REGISTRE/nations-actives.html">Registre</a></li>

            <li><a href="../INSCRIPTION">Inscription</a></li>

            <li><a href="../TELECHARGEMENT">Téléchargements</a></li>

            <li><a href="../partenaires.php">Partenaires</a></li>

        </ul>

        <ul class="menu2">

            <li><a href="../HISTOIRE">Histoire simplifiée</a></li>

            <li><a href="../RACES">Races</a></li>

            <li><a href="../WIKI/Accueil.html">Bibliotheque</a></li>

            <li><a href="../GAZETTE/GG/Edito.html">Gazette</a></li>

            <li><a href="http://asso.septentrion-game.com/">Association</a></li>

            <li><a href="http://igs.septentrion-game.com/">Statistiques</a></li>

            <li><a href="http://forum.septentrion-game.com/">Forum</a></li>

        </ul>        <div class="contenu">

            <ul class="bloc_tv">

                <li><a href="PROFIL/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/profil.png&amp;texte=Profil" alt="Profil" title="Profil" /></a></li>

                <li><a href="http://ordre.septentrion-game.com/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/ordres.png&amp;texte=Vos ordres" alt="Vos ordres" title="Vos ordres" /></a></li>

                <li><a href="MESSAGERIE/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/message.png&amp;texte=Vos messages" alt="Vos messages" title="Vos messages" /></a></li>

                <li><a href="RACE/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/race_0.png&amp;texte=Votre race" alt="Votre race" title="Votre race" /></a></li>

                <li><a href="RAPPORT/"><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/rapport.png&amp;texte=Votre rapport" alt="Votre rapport" title="Votre rapport" id="dec0" /></a></li>

                <li><img src="../IMAGES/SITE/bloctv.php?image=IMAGE_BLOC/vide.png&amp;texte=" alt="" title="" id="dec1" /></li>

            </ul>

</div></div>';