IE ne fonctionne pas en boucle par HTMLCollection correctement

Question

je fait une console.log sur une variable et dans IE il est revenu avec

<HtmlCollection length="8"> 
     <input name="Date_Visit" class="Visitor wmp-calendar hasDatepicker" id="rn_Date_Visit_Visitor_23" required="" type="text"></input> 
     <input name="Time_Arrival" class="Visitor" id="rn_Time_Arrival_Visitor_23" required="" type="text" maxlength="50"></input> 
     <textarea name="Visitor_Names" class="Visitor" id="rn_Visitor_Names_Visitor_23" rows="5"></textarea> 
     <input name="Visitor_Organisation" class="Visitor" id="rn_Visitor_Organisation_Visitor_23" required="" type="text"></input> 
     <input name="Host_Name" class="Visitor" id="rn_Host_Name_Visitor_23" required="" type="text" maxlength="50"></input> 
     <input name="Host_Collar" class="Visitor" id="rn_Host_Collar_Visitor_23" required="" type="text" maxlength="50"></input> 
     <input name="Host_Contact" class="Visitor" id="rn_Host_Contact_Visitor_23" required="" type="text" maxlength="50"></input> 
     <input name="Floor_Meeting" class="Visitor" id="rn_Floor_Meeting_Visitor_23" type="text" maxlength="50"></input> 
     </HtmlCollection> 
</HtmlCollection> 

C'est ce que je mettais le

ci-dessus

var elements = mainDiv.children[i].getElementsByClassName('Visitor'); 
console.log(elements); 

Similaire dans Chrome (avec plus de détails cependant)

Donc ce code ci-dessous, fonctionne dans Chrome mais échoue dans IE. Dans IE tout ce qu'il montre est les noms, et quelques trucs au hasard comme "length", "item" et "namedItem" sur le second console.log. IE11 n'affiche pas tous les noms de propriété, juste le premier.

for (var k in elements) { 
    console.log("validateForm 5"); 
    console.log(" > k: " + k); 
    console.log(" > k.search(rn): " + k.search("rn_")); 
    if (k.search("rn_") > -1){ 
     console.log("validateForm 6"); 
     var temp = k.split("_"); 
     var key = temp[1]+"_"+temp[2]; 
     var value = elements[k].value; 
     VisitorData[x] = key+"|"+elements[k].value;//.getAttribute("value"); 
     x++;   
    } 
} 

Un conseil? Donc, par exemple https://jsfiddle.net/6f0L9ye8/1/ fonctionne bien dans Chrom, il ramène tout (y compris ICI, WE et GO) mais IE11 ne

Answer 1

for-in n'est pas pour faire défiler des éléments dans une collection, c'est un objet.

à boucle à travers la collection, utilisez un for simple:

for (var k = 0; k < elements.length; ++k) { 
    var element = elements[k]; 
    // ... 
} 

... ou utilisez forEach de Array.prototype:

Array.prototype.forEach.call(elements, function(element) { 
    // ... 
}); 

... ou l'une de plusieurs autres techniques looping. Il y en a plusieurs dans les réponses à this question qui traitent non seulement les tableaux (le sujet de la question) mais aussi les structures de type "tableau" telles que les collections DOM.

Si vous voulez visiter les éléments et faire quelque chose avec leur id et/ou name, vous utiliseriez une boucle, comme ci-dessus et d'agir sur id et name se trouve. Donc, en utilisant votre code HTML de jsFiddle mais avec input au lieu de div (name n'est pas un attribut valide pour div s):

var elements = document.getElementsByClassName("Visitor"); 
 
Array.prototype.forEach.call(elements, function(element, index) { 
 
    console.log("index = " + index); 
 
    if (element.id) { 
 
     console.log("id = " + element.id); 
 
    } 
 
    if (element.name) { 
 
     console.log("name = " + element.name); 
 
    } 
 
});

<input class="Visitor" id="ONE" name="Here"> 
 
<input class="Visitor" id="TWO" name="We"> 
 
<input class="Visitor" id="THREE" name="Go">

Si vous voulez d'autres attributs, vous pouvez utiliser element.attributes pour y accéder .