Javascript - Concatenate Multiple NodeLists Together

Question

I was originally asking for an elegant way to simulate the Array.concat() functionality in IE or older browsers, because it seemed that concat was not supported. Only, of course it is and the reason the object didn't support it is because it wasn't an array. Oops!

getElementsByTagName returns a NodeList, not an array. The real question, then, is: what's a good way to get a single list of all the form elements in a document (input, select, textarea, button) to loop through them? An array isn't required... a single NodeList would be perfect, too.

Note that I'm using IE6 as this is for a corporate intranet (soon IE8 though).

Answer 1

Array.concat

Har! (It's already supported by all modern browsers, including IE.)

Answer 2

To concatenate nodelists, convert them into arrays using Array.prototype.slice.call and then concat them normally.

var a = Array.prototype.slice.call(document.getElementsByTagName("p")),
    b = Array.prototype.slice.call(document.getElementsByTagName("div"))

var c = a.concat(b);

Edit: (Responding to your comment)

If you only have a few types of elements, this is okay but the performance decreases with the number of DOM calls you make. It may be better and faster to do a document.getElementsByTagName(*), loop thru the list and pick the elements with required node types.

Another thing to keep in mind is that the Array.prototype.slice method used above may not work in ALL browsers. Check out the comment starting line#723 in sizzle.js (the selector engine behind jQuery)

Of course, it is best to use a library like jQuery which handles all the headache. You can simply do:

$("input, select, textarea, <other tags>")

Answer 3

var a1=document.getElementsByTagName('div'),
a2=document.getElementsByTagName('button');
a1=[].slice.call(a1, 0,a1.length).concat([].slice.call(a2, 0,a2.length))

Answer 4

The answer to my revised question that I came up with was:

• It became simpler and probably performed better to just put the functionality into a separate function and call it three times with the different nodelists, rather than worry about a good way to cram them together into one.

• I ultimately switched to using MooTools (after several hours reading up on comparisons of all the different frameworks). So now, getting an array of the items I want is very simple. I recommend using a javascript framework like this rather than people beating their brains out trying to figure out the best way to do things. Of course I'm all for actually learning the raw language (which is why I've held off using a framework for so long) but it isn't always the fastest way to get things going, which in a business often matters as much as improving the coder's ability with the language.