4

私は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コードが悪い場合は申し訳ありません。ここで簡略化したサイトで作成された同じもののグリースモンキースクリプトを書いています。だから私はそれを制御することはできません。[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);
}

多くの問題が発生しました。結果の出力には、リンクがほとんど表示されませんでした。Peacock、Crow、Swan、Ravenは出力に表示されず、
静的になった後、上にスペースが印刷され、リンク間に切れ目がないため、すべてのタグが台無しになります。初心者のjavascriptプログラマーとして、私はここで立ち往生しています。正しい方向への支援をいただければ幸いです。この問題をエレガントに解決する方法はありますか？ありがとう。

ポールブラード。

PS：私はFx3.0.11を使用しています。

4

3 に答える 3

7

結果のドキュメントでいくつかのノードが欠落した理由については、次のように説明できます。

別のノードに移動する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>そのように要素を失わないようにします。

于 2009-07-25T17:26:54.903 に答える
4

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

于 2009-07-25T16:17:53.607 に答える
-1

<marquee>すべての Web サイトで s を削除することが目標である場合、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.
   */
}

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

于 2009-07-25T17:17:58.387 に答える