Search code examples
javascriptarraysnodelist

How to shuffle a NodeList


Let's say I have a Nodelist:

list = document.querySelectorAll('div');

and I want to shuffle it. How would I do this?

The only answer I came across, here suggests turning the nodelist into an array using

var arr = [].concat(x);

Similarly, the MDN suggests the following (to turn a NodeList into an array):

var turnObjToArray = function(obj) {
  return [].map.call(obj, function(element) {
    return element;
  })
};

My question is, is there no way to do this without turning a NodeList into an array?

And, which of the above two methods is better?

And, once you have turned a NodeList into an array, does anything change when you operate on certain members of the array? (I.e. does deleting one node from the array delete it from the NodeList)?


Solution

  • If you need to change the order of elements in-place this may help you

    var list = document.querySelector('div'), i;
    for (i = list.children.length; i >= 0; i--) {
        list.appendChild(list.children[Math.random() * i | 0]);
    }
    

    Working jsBin

    Side note: concat() in general is slower