javascript - IE 无法正确循环 HtmlCollection

Question

我在一个变量上执行了 console.log，在 IE 中它返回了

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

这是我用来放置上面的内容

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

Chrome 中类似(但有更多细节)

所以下面的代码在 Chrome 中有效，但在 IE 中失败。在 IE 中，它显示的只是名称，以及第二个 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 中工作正常，它会带回所有内容(包括 HERE、WE 和 GO)，但 IE11 不会

Answer 1

for-in 不是用于循环遍历集合中的元素，而是用于循环遍历对象中的属性名称。

要循环访问集合，请使用简单的 for:

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

...或使用 Array.prototype 中的 forEach:

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

...或任何其他几种循环技术。 this question的答案中概述了几个不仅处理数组(问题的主题)，还处理“类似数组”的结构，例如 DOM 集合。

如果您想访问元素并对其id和/或name执行某些操作，您可以使用循环，例如上面的内容，如果找到的话，对 id 和 name 进行操作。因此，使用 jsFiddle 的 HTML，但使用 input 而不是 div (name 不是 div 的有效属性):

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来访问它们。