استبدال علامة HTML مع علامة أخرى باستخدام JS DOM

StackOverflow https://stackoverflow.com/questions/1182387

سؤال

أنا جديد إلى حد ما على JavaScript و DOM وأوصي مشكلة في معالجة DOM باستخدام JavaScript للحصول على رمز 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 في Marquee. ؛-). لذلك كتبت البرنامج النصي التالي. (أنا جديد على برمجة 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 مبتدئ، أنا عالق هنا وأي مساعدة في الاتجاه الصحيح سيكون موضع تقدير كبير. أي وسيلة لحل هذه المشكلة بأناقة؟ شكرا.

بول بولارد.

ملاحظة: أنا أستخدم FX 3.0.11.

هل كانت مفيدة؟

المحلول

هل فكرت في استخدام 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.

نصائح أخرى

أما بالنسبة لسبب أنه انتهى مستندك الناتج في عداد المفقودين عقد قليلة، يمكنني أن أقول لك لماذا:

عندما انت appendChild إلى عقدة أخرى، يزيله 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> ولا تفقد عناصر بهذه الطريقة.

إذا كان هدفك هو التخلص منه <marquee>S على جميع مواقع الويب، ربما أفضل طريقة للقيام بذلك هي مجرد تعديل 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.
   */
}

(أعتقد أن هذا بالفعل مدرج بالفعل في هذا الملف كقالب، حتى :)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top