如何洗牌NodeList

Question

假设我有个Nodelist：

list = document.querySelectorAll('div');

我想洗牌。我该怎么做？

我遇到的唯一答案是，这里建议将节点列表转换为array

var arr = [].concat(x);

类似地，MDN建议如下(将NodeList转换为array)：

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

我的问题是，如果不将NodeList转换为数组，就没有办法做到这一点吗？

以上两种方法中哪一种更好？

而且，一旦您将一个NodeList转换成一个数组，当您对该数组的某些成员进行操作时，会发生什么变化吗？(即从数组中删除一个节点是否从NodeList中删除)？

Answer 1

如果您需要更改原处元素的顺序，这可能对您有所帮助。

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

工作jsBin

附带注意:一般来说，concat()比较慢。

Answer 2

一个现代的选择可能是使用CSS或Flexbox属性。这种方法的优点是可以通过简单地移除样式来撤消它。

    var Scramble = function(){
        [].slice.call( document.querySelectorAll(".myClass") ).filter( function( _e ){
            _e.style.order =  (Math.floor(Math.random() * (10) + 1));
        } );
    }