Question

我对javascript和DOM相当新，我在使用javascript操作DOM时遇到以下html代码的问题。

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

Answer 1

至于你的结果文档最终缺少几个节点的原因，我可以告诉你原因：

当您appendChild到另一个节点时，DOM会将其从以前的任何位置删除。因此，当您浏览第一个节点时，它会在向DOM前进i的同时删除子节点。假设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>中的第一项，并且不会丢失那些元素。

Answer 2

您是否考虑过使用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

Answer 3

如果您的目标是在所有网站上删除<marquee>，那么最好的方法是编辑您的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.
   */
}

（我认为它实际上已作为模板包含在该文件中，甚至：）

使用JS DOM将html标记替换为另一个标记

3 个答案: