javascript array push problem

Question

I have the following javascript code:

var objectArray = [];
var allInputObjects = [];
var allSelectObjects = [];
var allTextAreaObjects = [];
//following returns 3 objects
allInputObjects = document.getElementById("divPage0").getElementsByTagName("INPUT");
//following returns 1 object
allSelectObjects = document.getElementById("divPage1").getElementsByTagName("SELECT");
//following returns 0 objects
allTextAreaObjects = document.getElementById("divPage2").getElementsByTagName("TEXTAREA");
//and following statement does not work
objectArray = allInputObjects.concat(allSelectObjects);

And my problem is that the last line is throwing an error.

I tried the above code in Firefox and it says allInputObjects.concat is not a function.

Any clues, I believe the script is not treating allInputObjects as an Array!

Any help will be appreciated.

Answer 1

getElementsByTagName returns a NodeList, which is similar to an Array except that it does not support all those prototype functions.

To seamlessly convert such an array-like object into an Array, use:

var arr = Array.prototype.slice.call(somenodelist, 0);

arr will almost be identical, except that it now has the Array prototype functions supported, like concat.

What the function actually does is returning a partial Array containing the elements of somenodelist, to be precise everything from index 0 and after. Obviously, this are just all elements, therefore this is a trick to convert array-like objects into real Arrays.

• Andrzej Doyle: +1 since this contains an actual solution to the problem (converting the NodeList back to an array).
• RobG: You can't expect host objects to behave when passed to native ECMAScript functions. In this case, IE < 9 (at least) will fail.
• pimvdb: @RobG: Really? I believe jQuery also utilizes this function in it .toArray function.

Answer 2

Why do you think that allSelectObjects is an array?

It is initially assigned to an empty array, sure. But then it's overwritten by the getElementsByTagName call on line 6(ish). Variables in Javascript are not strongly typed, so the initial assignment does not force later assignments to also be arrays.

I suspect you'll have some type of NodeList or similar, rather than an array, in the variable when you invoke the final line. (That's what's returned by the method in Firefox, at least.)

Answer 3

As Andezej has pointed out, you're not dealing with an array here, you're dealing with a kind of node list.

Here's one way you can create an array to work with based on the result of getElementsByTagName

 var tags = obj.getElementsByTagName('input');
 for (var j=0;j<tags.length;j++) {
 resultArray.push(tags[j]);
 }

Answer 4

Just another funny way to convert your NodeList to an array:

var tags = obj.getElementsByTagName('input'),
 tags2Arr = ( 
 function toArr(i){
 return i ? toArr(i-1).concat(tags[i]) : [tags[0]];
 }(tags.length-1) 
 );

Now if you add a method to the Array.prototype:

Array.prototype.clone = function() {
 var arr = this;
 return (function clone(i){
 return i ? clone(i-1).concat(arr[i]) : [arr[0]];
 })(this.length-1);
};

You can convert a NodeList to an array, using this oneliner:

Array.prototype.clone.call(obj.getElementsByTagName('input'));