我是 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。
最佳答案
至于你生成的文档最终缺少几个节点的原因，我可以告诉你原因:
当你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> 中的第一项并且不要那样丢失元素。
关于javascript - 使用 JS DOM 将 html 标签替换为另一个标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1182387/