1. дома
  2. Вопрос и ответ
  3. Замена тега html другим тегом с использованием JS DOM

Замена тега html другим тегом с использованием JS DOM

2009-07-25 2 views
3

Я довольно новичок в javascript и DOM, и у меня возникла проблема с манипулированием DOM с помощью javascript для следующего кода html.Замена тега html другим тегом с использованием JS 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 код bad.I пишет 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, я застрял здесь, и любая помощь в правильном направлении была бы высоко оценена. Любой способ элегантно решить эту проблему? Благодарю.

paul bullard.

PS: Я использую Fx 3.0.11.

источник

2009-07-25 Anonymous

+0

не является стандартным тегом HTML. Он доступен только в IE и частично в Firefox. – jao

ответ

3

Считаете ли вы использование 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-25 16:17:53 thedz

+0

Чувак, ты гений. Интересно, как я об этом не думал. : -? Спасибо тонну. – 2009-07-25 16:25:31

0

Если ваша цель состоит в том, чтобы избавиться от <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. 
    */ 
}

(я думаю, что это на самом деле уже включены в этот файл в качестве шаблона, даже :)

источник

2009-07-25 17:17:58

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

Вы можете это исправить в одном из двух способов. Во-первых, вы могли бы сделать это изменение:

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

так что вы всегда манипулирует клонированный узел, и оригинальное <marquee> не элементы удалены, или вы можете сделать это изменение:

fixedElement.appendChild(marqueeElement.firstChild);

так что вы всегда берете первый элемент в <marquee> и не теряете элементы таким образом.

источник

2009-07-25 17:26:54

 Смежные вопросы

  • Нет связанных вопросов^_^