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

**BlindeKinder** · 03/03/2011, 17h27

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 :

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
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

**NoSmoking** · 03/03/2011, 18h41

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 :

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
<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

**Bovino** · 03/03/2011, 19h41

C'est du détail, mais tu commets quelques maladresses dans ton code.

*

Code :

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

1
2
3
window.onload = function() {
	son() ;	
}

Pourquoi pas, mais

Code :

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

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

**BlindeKinder** · 03/03/2011, 22h04

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:

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...

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

genre:

Code :

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

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

?

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?

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

**Bovino** · 03/03/2011, 22h27

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 :

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

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 :

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

window.onload = son;

genre :

Code :

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

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

?

Oui, c'est tout à fait ça

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

Au lieu de

Code :

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

1
2
3
var chemin = lien.getAttribute('href') ;
...
lecteur.setAttribute( 'id' , lien)

fais
[/QUOTE]
Au lieu de

Code :

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

1
2
3
var chemin = lien.href;
...
lecteur.id = lien;

**BlindeKinder** · 03/03/2011, 23h06

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

tout juste...

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...

**BlindeKinder** · 03/03/2011, 23h20

tout est ok, merci encore

pour la question initiale, il a juste fallu ajouter 'else' devant le 'i++'...

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

JavaScript

Discussions similaires

Partager

Partager