Javascript HTMLCollection 객체가 firefox10에서 제대로 작동하지 않습니다.

Question

HTML 콜렉션 객체를 배열로 사용하여 요소를 추가했습니다. I는 claimantEmails 및 defendantEmails 두 HTML 입력 요소를 각각 가지고 끝에서 다음 코드

var claimantEmailValues = document.getElementsByName("claimantEmails"); 
var defendantEmailValues = document.getElementsByName("defendantEmails"); 


var k = defendantEmailValues.length; 
for(var i=0; i<claimantEmailValues.length;i++){ 
     defendantEmailValues[k++] = claimantEmailValues[i]; 
} 

는 defendantEmailValues의 길이는 4가 될 것이다. 대신 길이는 2이고 오류가 없습니다. 파이어 폭스를 제외한 파이어 폭스의 모든 버전에서 잘 작동합니다. 왜 누군가에게 설명해 주시겠습니까?

Answer 1

JavaScript 배열은 현재 길이 이상인 숫자 속성을 설정할 때 증가하는 magic 길이 속성이있는 개체입니다. HTMLCollection 개체의 길이 속성은 있지만 마법이 아니며 숫자 속성을 설정할 때 증가하지 않아야합니다. 요소를 요소에 추가하면 실제로는 속성 이름으로 숫자를 사용하여 이름이 지정된 속성을 객체에 추가하는 것입니다.

당신은 Array.prototype.slice를 사용하여 첫 번째 배열에 컬렉션을 변환하는 것이 더 낫다 :

var slice = Array.prototype.slice, 
    claimantEmailValues = slice.call(document.getElementsByName("claimantEmails")), 
    defendantEmailValues = slice.call(document.getElementsByName("defendantEmails")); 

var k = defendantEmailValues.length; 
for(var i=0; i<claimantEmailValues.length;i++){ 
     defendantEmailValues[k++] = claimantEmailValues[i]; 
} 

그것은 가능성이 높습니다 이전 파이어 폭스 버전의 행동은 잘못 ​​항목 HTMLCollection 인스턴스에 추가 할 수 있도록했고 버그는 만했다 Firefox 10에서 수정되었습니다.