IEがHtmlCollectionをループが正しく

Question

私は変数にはconsole.logを行っていないとIEでそれがこれは私が

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

上記を置くために使用したものである

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

に戻ってきましたChromeと同様（詳細はこちら）

このコードはChromeで動作しますが、IEでは失敗します。 IEで表示されるのは、名前と、2番目のconsole.logに "length"、 "item"、 "namedItem"のようなランダムなものです。 IE11はすべてのプロパティ名を表示するわけではありません。

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

アドバイスはありますか？例えばhttps://jsfiddle.net/6f0L9ye8/1/はChromでうまく動作しますが、ここではすべてを返しますが、IE11は含まれません。

Answer 1

for-inはコレクション内の要素をループしないためのものです。オブジェクト。

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

を...またはArray.prototypeからforEachを使用します：

コレクションをループするために、簡単なfor使用

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

...または他のいくつかのループの技術のいずれかを。 this questionの回答には、配列（質問のトピック）だけでなく、DOMコレクションなどの「配列のような」構造も処理するいくつかの概要があります。

あなたが彼らのidおよび/またはnameで何かを要素とを訪問したい場合は見つかった場合、あなたは、上記とidとname上の行為としてループを使用すると思います。だから、（nameがdivのための有効な属性ではありません）が、input代わりのdivであなたのjsFiddleのHTMLを使用して：

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

あなたが他の属性をしたい場合は、あなたがそれらにアクセスするためにelement.attributesを使用することができます。