4

我对 javascript 和 DOM 相当陌生，并且在使用 javascript 为以下 html 代码操作 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);
}

出现了很多问题。结果输出没有显示很少的链接。Peacock, Crow, Swan, Raven 在输出中看不到，所有
标签在变为静态后都被弄乱了，上面印有空格并且链接之间没有中断。作为一个初学者 javascript 程序员，我被困在这里，任何在正确方向上的帮助将不胜感激。有什么方法可以优雅地解决这个问题？谢谢。

保罗布拉德。

PS：我使用的是 Fx 3.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

您可以通过以下两种方式之一解决此问题。首先，您可以进行此更改：

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>在所有网站上删除 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 回答