Question

I used HTML collection object as an array and adding the elements into it. The below code,

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

At the end, length of defendantEmailValues should be 4 as I have two HTML input elements each for claimantEmails and defendantEmails. Instead the length is 2 and there was no errors. Its working well in all the versions of firefox except firefox 10. Can you someone please explain why?

Answer 1

JavaScript arrays are objects with a magic length property that increases when you set a numeric property equal to or above the current length. HTMLCollection objects have a length property, but it is not magic and should not increase when you set a numeric property. When you add an element to them, you’re really just adding a named property to an object, using a number as the property name.

You’re better off converting the collections to arrays first using 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];
}

It’s likely that the behaviour of previous Firefox versions was incorrectly allowing items to be added to HTMLCollection instances and the bug was only just fixed in Firefox 10.