IE가 제대로

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

을 넣어 사용하는 것입니다 HtmlCollection을하지 루프를 않습니다 Chrome에서 비슷합니다 (그러나 자세한 내용은 있음)

아래 코드는 Chrome에서 작동하지만 IE에서는 실패합니다. 그것은 IE에서 두 번째 console.log에 "길이", "항목"및 "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, 당신이 사용하는 거라고 루프와 함께 뭔가를합니다. 당신의 jsFiddle의 HTML 만에를 사용 그래서 input 대신 (name이 div들에 대한 유효한 속성 없음) 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을 사용할 수 있습니다 .