Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript - Concatenate Multiple NodeLists Together

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!

like image 437
ErikE Avatar asked Mar 12 '10 02:03

ErikE


People also ask

How do I merge two node lists?

(1) Create a new head pointer to an empty linked list. (2) Check the first value of both linked lists. (3) Whichever node from L1 or L2 is smaller, append it to the new list and move the pointer to the next node. (4) Continue this process until you reach the end of a linked list.

What is NodeList js?

NodeList objects are collections of nodes, usually returned by properties such as Node. childNodes and methods such as document. querySelectorAll() . Note: Although NodeList is not an Array , it is possible to iterate over it with forEach() .


3 Answers

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>")
like image 112
Chetan S Avatar answered Oct 18 '22 11:10

Chetan S


With the ES6 spread operator you can do

let arr = [...nodeList1, ...nodeList2];
like image 45
Kevin Avatar answered Oct 18 '22 09:10

Kevin


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

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

like image 3
yckart Avatar answered Oct 18 '22 10:10

yckart