प्रतिस्थापन चाइल्ड() एक प्रकार के तत्व को दूसरे के साथ बदलते समय अजीब तरीके से व्यवहार क्यों करता है?

Question

मैं जावास्क्रिप्ट पर अपेक्षाकृत नया हूं, और एक दिलचस्प व्यवहार पाया जिसे मैं आज समझा नहीं सकता। मेरे पास एक वेबसाइट पर एक कस्टम <hr> (एक छवि के साथ) है, जो आईई 7 और नीचे में विचित्र रूप से प्रदर्शित होता है। इसे दूर करने के लिए, मैं का उपयोग getElementsByTag() के साथ संयोजन में करना चाहता था। प्रारंभ में, मैं बस सूची पर पाश करने की कोशिश की है, तो:

var hrules = document.getElementsByTagName('hr'); 
for (var i=0; i < hrules.length; i++) { 

    var newHrule = document.createElement("div"); 
    newHrule.className = 'myHr'; 

    hrules[i].parentNode.replaceChild(newHrule, hrules[i]); 

    document.write(i); 
} 

बहरहाल, यह काम नहीं करता है: यह वास्तव में केवल आधा तत्व हो जाता है, हर दूसरे एक लंघन। ।

var hrules = document.getElementsByTagName('hr'); 
var i = 0; 
while (i < hrules.length) { 

    var newHrule = document.createElement("div"); 
    newHrule.className = 'myHr'; 

    hrules[i].parentNode.replaceChild(newHrule, hrules[i]); 

    document.write(i); 
} 

i: मुद्रण i दस्तावेज़ में <hr> तत्वों की वास्तविक संख्या के आधे पूर्णांक मूल्यों देता है (उदाहरण के लिए अगर वहाँ 7 <hr/> तत्व हैं, यह प्रिंट इसके विपरीत, निम्नलिखित काम करता है दस्तावेज में hrules के रूप में कई बार मुद्रित किया जाता है (लेकिन निश्चित रूप से हमेशा 0 है, क्योंकि मैं इसे बढ़ा नहीं रहा हूं), और hrules सही ढंग से बदल दिया गया है। मुझे लगता है कि while यहां भी while(true) हो सकता है - - यह तब तक चल रहा है जब तक यह <hr> तत्वों से बाहर नहीं हो जाता है, लेकिन उसके बाद रुक जाता है (यह एन है ओटी प्रिंटिंग और 0 एस)।

मैंने कई अलग-अलग प्रकार के तत्वों के साथ यह कोशिश की है, और यह देखा है कि यह केवल तब होता है जब एक प्रकार तत्व के साथ दूसरे स्थान को बदलता है। अर्थात, और pdiv साथ, spanp, आदि के साथ, divdiv साथ, की जगह अगर मैं p साथ p की जगह आदि मूल उदाहरण सही ढंग से काम करता है।

मुझे मिले दस्तावेज में कुछ भी नहीं (w3schools, विभिन्न Google खोज, यहां इत्यादि) एक स्पष्ट उत्तर सुझाता है।

यहां क्या हो रहा है? सबसे पहले, मैंने दूसरा उदाहरण क्यों पेश किया - replaceChild() स्वचालित रूप से तत्वों पर फिर से चल रहा है? दूसरा, विभिन्न प्रकार के तत्वों के लिए व्यवहार अलग क्यों है?

Answer 1

document.getElementsByTagName दस्तावेज़ में सभी मानव संसाधन तत्वों के लिए एक लाइव पहुंच है - जब भी आप दस्तावेज़ बदलते हैं तो यह अपडेट होता है। जब भी आप इसे कॉल करते हैं तो आपको दस्तावेज़ में सभी एचआर का स्नैपशॉट नहीं मिलता है।

तो, पहले कोड के साथ, आप दोनों बढ़ रहे हैं और लूप के चारों ओर हर बार hrules.length के आकार को कम कर रहे हैं। यह बताता है कि आप केवल आधा कदम क्यों देखते हैं।

Answer 2

यहां कोई समाधान है जिसका उपयोग मैंने समाप्त किया है, अगर किसी और के मामले में (ऊपर @Pav जैसा) उत्सुक है।

var hrules = document.getElementsByTagName('hr'); 

/* Each repetition will delete an element from the list */ 
while (hrules.length) { 
    var newHrule = document.createElement("div"); 
    newHrule.className = 'ieHr'; 

    /* Each iteration, change the first element in the list to a div 
    * (which will remove it from the list and thereby advance the "head" 
    * position forward. */ 
    hrules[0].parentNode.replaceChild(newHrule, hrules[0]); 
} 

अनिवार्य रूप से, आपको दस्तावेज़ में सभी नियमों की एक सूची प्राप्त होती है। जब आप इसके साथ बातचीत करते हैं तो यह सूची गतिशील रूप से अपडेट की जाती है (मैथ्यू विल्सन के answer देखें)। प्रत्येक बार जब आप सूची के पहले तत्व को div में बदलते हैं, तो यह सूची से हटा दिया जाता है, और सूची तदनुसार अपडेट की जाती है। नतीजा यह है कि आपको सूची की लंबाई तक प्रत्येक बार सूची के पहले तत्व पर कार्य करने की आवश्यकता होती है।

यह स्वीकार्य रूप से थोड़ा सा counterintuitive है, लेकिन यह सूची कैसे काम करती है।