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

Question

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

我对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>

Run Code Online (Sandbox Code Playgroud)

对不起,如果上面的HTML代码是坏的.我正在写一个关于由我在这里简化的网站生成的相同的greasemonkey脚本.所以我无法控制它.我希望[字幕]标签与[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);
}

Run Code Online (Sandbox Code Playgroud)

发生了很多问题.结果输出没有显示很少的链接.孔雀,乌鸦,天鹅,乌鸦都没有看到在输出和所有的
标签都搞砸了就变成静态的,其中上面印有空间和环节之间没有休息之后.作为一个初学javascript程序员我被困在这里,任何正确方向的帮助将非常感激.有没有办法优雅地解决这个问题？谢谢.

保罗布拉德.

PS:我使用的是Fx 3.0.11.

Answer 1

Pau*_*her 6

至于你的结果文档最终缺少几个节点的原因,我可以告诉你为什么:

当您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

Run Code Online (Sandbox Code Playgroud)

您可以通过以下两种方式之一解决此问题.首先,您可以进行此更改:

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

Run Code Online (Sandbox Code Playgroud)

所以你总是操纵一个克隆节点,原来<marquee>没有删除元素,或者你可以做这个改变:

fixedElement.appendChild(marqueeElement.firstChild);

Run Code Online (Sandbox Code Playgroud)

所以你总是把第一个项目拿走<marquee>,不要那样丢失元素.

归档时间：	16 年，4 月前
查看次数：	5018 次
最近记录：	16 年，4 月前