当前位置： 文江博客 话题详情

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

发布于 2024-07-29 06:22:41 字数 3148 浏览 3 评论 0 原文

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

原文

I am fairly new to javascript and DOM and I am having a problem with manipulating DOM using javascript for the following html code. 

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

Sorry if the above html code is bad.I am writing a greasemonkey script for the same which is produced by a site which i have simplified here. So i have no control over it whatsoever.
I want the [marquee] tag to be replaced with the [div] tag so that it becomes static and i don't have to wait forever for the 100th link in the marquee to come up. ;-). So I wrote the following script. (I am new to js programming and yes i know that my script sucks :-) ) 

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);
}

Many problems occured. The resulting output did not show few links on it.
Peacock, Crow, Swan, Raven are not seen in the output and all the
tags are messed up after it becomes static with spaces printed above and no breaks between the links.
As a beginner javascript programmer i am stuck here and any assistance in the right direction would be much appreciated. Any way to elegantly solve this problem? Thanks.

paul bullard.

PS: I am using Fx 3.0.11.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

浮云落日 2024-08-05 06:22:41

至于您生成的文档最终丢失了一些节点的原因，我可以告诉您原因：

当您 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());

以便您始终操作克隆的节点，并且原始 没有删除元素，或者您可以进行此更改：

fixedElement.appendChild(marqueeElement.firstChild);

以便您始终获取 中的第一项，并且不要以这种方式丢失元素。

As for the reason that your resultant document ended up missing a few nodes, I can tell you why:

When you appendChild to another node, the DOM removes it from wherever it used to be. So when you go through the first node, it's removing children at the same time as it advances i down the DOM. Assume that A, B, C, etc. are child nodes, and this is what happens at the start of your loop:

    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

You can fix this in one of two ways. Firstly, you could make this change:

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

so you're always manipulating a cloned node, and the original <marquee> doesn't have elements removed, or you can make this change:

fixedElement.appendChild(marqueeElement.firstChild);

so that you always take the first item in the <marquee> and don't lose elements that way.

回复 原文
寄意 2024-08-05 06:22:41

你考虑过使用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

Have you considered using innerHTML?

 var marq = document.getElementsByTagName('marquee')[0];
 var div = document.createElement('div');
 div.innerHTML = marq.innerHTML;
 marq.parentNode.appendChild(div);
 marq.parentNode.removeChild(marq);

Not the most efficient, but straight-forward.

See: http://jquery.nodnod.net/cases/586

回复 原文
我是男神闪亮亮 2024-08-05 06:22:41

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

我认为这实际上已经作为模板包含在该文件中，甚至:)

If your goal is to get rid of <marquee>s on all web sites, perhaps the best way to do so is to just edit your userContent.css file to include the following:

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.
   */
}

(I think that's actually already included in that file as a template, even :)

回复 原文
~没有更多了~

关于作者

栖迟

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

lioqio

文章 0 评论 0

Single

文章 0 评论 0

禾厶谷欠

文章 0 评论 0

alipaysp_2zg8elfGgC

文章 0 评论 0

qq_N6d4X7

文章 0 评论 0

放低过去

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文