JS DOMを使用してHTMLタグを別のタグに置き換える

StackOverflow https://stackoverflow.com/questions/1182387

質問

私はJavaScriptとDOMをかなり初めてであり、次のHTMLコードのJavaScriptを使用して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>

上記のHTMLコードが悪い場合は申し訳ありません。ここで簡略化したサイトによって作成されたGreasemonkeyスクリプトを作成しています。だから私はそれをまったく制御できません。 [Marquee]タグを[Div]タグに置き換えて、静的になり、マーキーの100番目のリンクが登場するのを永遠に待つ必要はありません。 ;-)。だから私は次のスクリプトを書きました。 （私はJSプログラミングに慣れていません。はい、私のスクリプトが吸うことを知っています:-)） 

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);
}

多くの問題が発生しました。結果の出力には、リンクがほとんど表示されませんでした。孔雀、カラス、白鳥、レイヴンは出力には見られません。
タグは、上記のスペースが印刷されており、リンク間に破損がない状態で静的になった後に台無しになります。初心者のJavaScriptプログラマーとして、私はここで立ち往生しており、正しい方向への支援は大歓迎です。この問題をエレガントに解決する方法はありますか？ありがとう。

ポール・ブラード。

PS：FX 3.0.11を使用しています。

役に立ちましたか？

解決

innerhtmlの使用を検討しましたか？

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

最も効率的ではありませんが、簡単です。

見る： http://jquery.nodnod.net/cases/586

他のヒント

結果のドキュメントがいくつかのノードが欠落している理由については、理由をお伝えできます。

あなたがいつ appendChild 別のノードに、DOMは以前の場所から削除します。したがって、最初のノードを通過するとき、それは前進するのと同時に子供を除去しています i DOMを下ります。と仮定する A, B, C, 、などは子ノードであり、これはループの開始時に起こることです。

    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

これを2つの方法のいずれかで修正できます。まず、この変更を行うことができます。

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

だから、あなたは常にクローンされたノードを操作し、元のノードを操作しています <marquee> 要素が削除されていないか、この変更を行うことができます。

fixedElement.appendChild(marqueeElement.firstChild);

あなたが常にで最初のアイテムを取るように <marquee> そのように要素を失わないでください。

あなたの目標が取り除かれることである場合 <marquee>sすべてのWebサイトで、おそらくそうするための最良の方法は、あなたを編集することです userContent.css 以下を含めるファイル：

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.
   */
}

（それは実際にそのファイルにテンプレートとして既に含まれていると思います:)

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top