Javascript - Concatenate Multiple NodeLists Together

Question

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

getElementsByTagName actually returns a NodeList. 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).

The answer that I came up with was:

• It became simpler and probably performed better to just put the code 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.

Update: almost 2 years later I would just use jQuery and be done with it!

Answer 1

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 the required nodeName.

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 2

function mergeNodeLists(a, b) {
  var slice = Array.prototype.slice;
  return slice.call(a).concat(slice.call(b));
}

console.log( mergeNodeLists( inputs, selects ) ); // => [input, select]

Answer 3

With the ES6 spread operator you can do

let arr = [...nodeList1, ...nodeList2];

Answer 4

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

Answer 5

As noted in the MDN Documentation, you can also use Array.from to convert a NodeList in to an Array on browsers that support it.

Answer 6

I'd of thought there would have been more answers than this, anyway I gave this a shot and came up with the following function although I had to bang my head a little.

function group_elements(element, tags) {
   var elements = element.getElementsByTagName('*');
   var results  = [];
   for ( var i = 0; i < elements.length; ++i ) {
      if ( tags.indexOf(elements[i].nodeName.toLowerCase()) > -1 ) {
         results.push(elements[i]);
      }
   }
   return results;
}


var form  = document.getElementById('form');
var tags = ['input', 'select'];
console.log(group_elements(form, tags));