1. Accueil
  2. Question et réponse
  3. Remplacement d'une balise html par une autre balise à l'aide de JS DOM

Remplacement d'une balise html par une autre balise à l'aide de JS DOM

2009-07-25 10 views
3

Je suis assez novice en matière de javascript et DOM et j'ai un problème avec la manipulation de DOM en utilisant javascript pour le code html suivant.Remplacement d'une balise html par une autre balise à l'aide de JS DOM

<html> 
<head> 
    <title>Testing</title> 

</head> 
<body> 
<marquee direction=up height=400 scrollAmount=3.7 scrollDelay=70 onmousedown="this.stop()" onmouseover="this.stop()" onmousemove="this.stop()" onmouseout="this.start()"> 
     <a href="#"> <span>Lion</span></a><br><br> 
     <a href="#"> <span>Tiger</span></a><br><br> 
     <a href="#"> <span>Giraffe</span></a><br><br>   
     <a href="#"> <span>Dinosaur</span></a><br><br>   
     <a href="#"> <span>Cat</span></a><br><br>     
     <a href="#"> <span>Dog</span></a><br><br>   
     <a href="#"> <span>Llama</span></a><br><br> 
     <a href="#"> <span>Rat</span></a><br><br> 
     <a href="#"> <span>Rhino</span></a><br><br> 
     <a href="#"> <span>Reindeer</span></a><br><br> 
     <a href="#" ><span >buffalo</span></a><br><br> 

<a href="#" ><span >Yak</span></a><br><br> 

<a href="#" ><span >Deer</span></a><br><br> 


<a href="#" ><span >moose</span></a><br><br> 



<a href="#" ><span >Rabbit</span></a> <br><br> 

<a href="#" ><span >Duck</span></a> <br><br> 



<a href="#" ><span >Peacock</span></a><br><br> 

<a href="#" ><span >Crow</span></a><br><br> 

<a href="#" ><span >Raven</span></a><br><br> 

<a href="#" ><span >Swan</span></a><br><br> 
</marquee>  
<input type="button" value="Set Me Fixed" onclick="setMeFixed();" /> 
</body> 
</html>

Désolé si le code html ci-dessus est bad.I suis en train d'écrire un script Greasemonkey pour le même qui est produit par un site que j'ai simplifié ici. Donc, je n'ai aucun contrôle sur quoi que ce soit. Je veux que la balise [marquee] soit remplacée par la balise [div] afin qu'elle devienne statique et que je n'aie pas à attendre indéfiniment que le 100e lien du chapiteau apparaisse. ;-). J'ai donc écrit le script suivant. (Je suis nouveau à la programmation js et oui je sais que mon script suce :-))

function setMeFixed(){ 
    var fixedElement=document.createElement('div'); 
    var marqueeElement=document.getElementsByTagName('marquee')[0]; 
    //var clonedMarqNodes=marqueeElement.cloneNode(true); 

    for(i=0;i<marqueeElement.childNodes.length;i++){ 
     fixedElement.appendChild(marqueeElement.childNodes[i]); 
    } 
    marqueeElement.parentNode.replaceChild(fixedElement,marqueeElement); 
}

De nombreux problèmes se sont produits. La sortie résultante n'a pas montré quelques liens sur elle. Le paon, le corbeau, le cygne, le corbeau ne sont pas vus dans la sortie et toutes les étiquettes
sont foirées après qu'elles deviennent statiques avec les espaces imprimés ci-dessus et aucune rupture entre les liens. En tant que programmeur javascript débutant je suis coincé ici et toute aide dans la bonne direction serait très appréciée. Un moyen de résoudre ce problème avec élégance? Merci.

paul bullard.

PS: J'utilise Fx 3.0.11.

Source

2009-07-25 Anonymous

+0

n'est pas une balise HTML standard. C'est seulement disponible dans IE et en partie dans Firefox. – jao

Répondre

3

Avez-vous envisagé d'utiliser innerHTML?

var marq = document.getElementsByTagName('marquee')[0]; 
var div = document.createElement('div'); 
div.innerHTML = marq.innerHTML; 
marq.parentNode.appendChild(div); 
marq.parentNode.removeChild(marq);

Pas le plus efficace, mais simple.

Voir: http://jquery.nodnod.net/cases/586

Source

2009-07-25 16:17:53 thedz

+0

Mec tu es un génie. Je me demande comment je n'ai pas pensé à ça. : -? Merci beaucoup. –

0

Si votre objectif est de se débarrasser de <marquee> s sur tous les sites web, peut-être la meilleure façon de le faire est de simplement modifier votre fichier userContent.css inclure les éléments suivants:

marquee { 
    -moz-binding: none; display: block; height: auto !important; 
    /* This is better than just display:none !important; 
    * because you can still see the text in the marquee, 
    * but without scrolling. 
    */ 
}

(Je pense que ce fait déjà inclus dans ce fichier comme modèle, même :)

Source

2009-07-25 17:17:58

6

Quant à la raison pour laquelle votre document résultant a fini par manquer quelques nœuds, je peux vous dire pourquoi:

Lorsque vous appendChild à un autre nœud, le DOM supprime de partout où il était. Ainsi, lorsque vous passez par le premier nœud, il supprime les enfants en même temps qu'il avance i sur le DOM. On suppose que A, B, C, etc. sont des nœuds enfants, et c'est ce qui se passe au début de la boucle:

i=0 ↓ 
MARQUEE: A B C D E F 
    DIV: 

    i=1 ↓ 
MARQUEE: B C D E F 
    DIV: A 

    i=2  ↓ 
MARQUEE: B D E F 
    DIV: A C 

    i=3  ↓ 
MARQUEE: B D F (accessing this gives you an exception!) 
    DIV: A C E

Vous pouvez résoudre ce problème dans l'une des deux façons. Tout d'abord, vous pouvez faire ce changement:

fixedElement.appendChild(marqueeElement.childNodes[i]); 
// becomes 
fixedElement.appendChild(marqueeElement.childNodes[i].cloneNode());

de sorte que vous manipulez toujours un nœud cloné et le <marquee> d'origine ne dispose pas d'éléments supprimés, ou vous pouvez faire ce changement:

fixedElement.appendChild(marqueeElement.firstChild);

afin que vous preniez toujours le premier article dans le <marquee> et ne perdez pas les éléments de cette façon.

Source

2009-07-25 17:26:54

 Questions connexes

  • Aucun problème connexe^_^