[DOM]boucle de remplacement d'éléments html

Version imprimable

bonjour,
je suis débutant en js, alors désolé si j'ai manqué quelque chose...
Je veux remplacer les liens de class="lecteur", qui sont dans le <div class="colonne"> par un <object> (qui sera un lecteur flash)...
Donc le code suivant fonctionne pas mal:
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 window.onload = function() { son() ; } function son() { var div = document.getElementById('colonne') ; var liens = div.getElementsByTagName('a') ; var i = 0 ; while ( i < liens.length ) { var lien = liens[i] ; if ( lien.className == 'lecteur' ) { var papa = lien.parentNode ; var chemin = lien.getAttribute('href') ; var texte = lien.firstChild ; var lecteur = document.createElement('object') ; lecteur.appendChild(texte) ; // lecteur.setAttribute( 'id' , lien) papa.replaceChild( lecteur,lien) ; //ou: //papa.insertBefore( lecteur , lien ) ; //papa.removeChild(lien) ; } i++ ; } }
sauf que dans la boucle, le lien suivant un lien remplacé n'apparaît plus. C'est à dire que si je met document.write(lien) ; par exemple apres var lien = liens[i] ;, il me manque tous les liens qui suivent immédiatement un <a class="lecteur"> dans le tableau...
Si je commente papa.replaceChild, ça fonctionne, il les affiche tous...
Il semble en fait que lors d'un remplacement, il supprime l'élément de la liste 'liens', et donc c'est logique, le compte 'i' ne correspond plus... Meme si je copie la liste ( var liste = liens ; ), il semble qu'il fait une copie par référence et j'ai le même résultat...
merci d'avance

Citation:

Il semble en fait que lors d'un remplacement, il supprime l'élément de la liste 'liens', et donc c'est logique, le compte 'i' ne correspond plus... Meme si je copie la liste ( var liste = liens ; ), il semble qu'il fait une copie par référence et j'ai le même résultat...

bonne analyse, il te faut replacer l'index de la nodeList

exemple
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 <html> <head> </head> <body> <a href="#" class="impair">1</a><br> <a href="#">2</a><br> <a href="#" class="impair">3</a><br> <a href="#">4</a><br> <a href="#" class="impair">5</a><br> <a href="#">6</a><br> </body> <script type="text/javascript"> var i, oSpan, oA, oLien = document.links; for( i = 0; i < oLien.length; i++){ oA = oLien[i]; if( oA.className == "impair"){ // creation d'un SPAN oSpan = document.createElement('SPAN'); oSpan.innerHTML = oA.innerHTML; // remplace element oA.parentNode.replaceChild( oSpan, oA); // replace l'index i--; } } </script> </html>
pas loin de ce que tu cherches à faire

03/03/2011, 19h41
Bovino
C'est du détail, mais tu commets quelques maladresses dans ton code.

*
Code:

1 2 3 window.onload = function() { son() ; }
Pourquoi pas, mais

Code:

window.onload = son;

est plus simple non ?

* Il faut éviter de déclarer les variables dans les boucles. Déclare-les en début de fonction ;)

* Le DOM attribue automatiquement aux objets de type HTMLElement des propriétés correspondant à leurs attributs standards.
Il me semble donc déconseillé d'utiliser getAttribute() et setAttribute() : manipuler les propriétés correspondantes est moins lourd que d'appeler une méthode qui va modifier le HTML puis forcer le DOM à se mettre à jour.

* Tu as probablement de bonnes raisons, mais modifier la page sur le onload du body est habituellement déconseillé : autant générer la page comme on la souhaite directement sur le serveur :?
03/03/2011, 22h04
BlindeKinder
Merci pour les réponses:
@noSmoking: oui en fait, jouer avec l'incrémentation me parait logique... je voulais savoir s'il y avait une autre méthode pour faire ça... Je tente et je reposte...
@Bovino:

Citation:

Pourquoi pas, mais
Code :
window.onload = son;

j'hésitais à mentionner ce problème hors topic: si je fais ça, il exécute bizarrement son; avant le chargement complet de la page (le script est dans un fichier séparé appelé dans le <head>)... donc pas de liens dans le tableau...

Citation:

Il faut éviter de déclarer les variables dans les boucles. Déclare-les en début de fonction

genre:
Code:

1 2 3 4 var exemple ; while (...) { exemple = ...
?

Citation:

Le DOM attribue automatiquement aux objets de type HTMLElement des propriétés correspondant à leurs attributs standards.
Il me semble donc déconseillé d'utiliser getAttribute() et setAttribute() : manipuler les propriétés correspondantes est moins lourd que d'appeler une méthode qui va modifier le HTML puis forcer le DOM à se mettre à jour.

oups, je suis pas sûr de comprendre... tu aurais un petit exemple?

Citation:

autant générer la page comme on la souhaite directement sur le serveur

oui, j'y ai pensé. En fait, le la question est la suivante: le contenu du site est édité par son proprio en html simple (<p>, <h1>, <ul> (oulah, ce dernier est déjà très compliqué...) ). Je ne veux pas lui demander de faire 5 ligne pour intégrer un player plusieurs fois sur une page (site de musicos ;) ). J'ai donc pensé à js, en pensant que c'était plus simple que ça, plutôt que de parser tout le contenu html pour transformer le lien (ou un code quelconque) en <object>...
maintenant j'essaye, j'apprends, et si ça va pas je trouverai autre chose

merci pour ce retour, c'est exactement le genre de correction/critiques que j'attendais :ccool:
03/03/2011, 22h27
Bovino
Citation:

j'hésitais à mentionner ce problème hors topic: si je fais ça, il exécute bizarrement son; avant le chargement complet de la page (le script est dans un fichier séparé appelé dans le <head>)... donc pas de liens dans le tableau...

Oui, parce que tu as dû essayer

Code:

window.onload = son();

dans ce cas, tu affectes à la propriété onload le résultat de l'exécution de la fonction, pas une référence à la fonction, c'est bien pour ça que j'ai proposé

Code:

window.onload = son;

;)
Citation:
genre :

Code:

1 2 3 var exemple ; while (...) { exemple = ...

?
Oui, c'est tout à fait ça :)

Citation:

oups, je suis pas sûr de comprendre... tu aurais un petit exemple?

Au lieu de
Code:

1 2 3 var chemin = lien.getAttribute('href') ; ... lecteur.setAttribute( 'id' , lien)
fais
[/QUOTE]
Au lieu de
Code:

1 2 3 var chemin = lien.href; ... lecteur.id = lien;
03/03/2011, 23h06
BlindeKinder

Citation:

Oui, parce que tu as dû essayer
Code :
window.onload = son();

tout juste... :roll: C'est typiquement le genre de choses avec lesquelles le patauge avec js, je ne sais jamais où je suis...
merci pour tout, je tente tout ça et vous redis...
03/03/2011, 23h20
BlindeKinder

tout est ok, merci encore :P
pour la question initiale, il a juste fallu ajouter 'else' devant le 'i++'...