Question

我们说我有一个Nodelist：

list = document.querySelectorAll('div');

我想要洗牌。我该怎么做？

我遇到的唯一答案here建议使用

将节点列表转换为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 Grid或Flexbox Order属性。这种方法的优点是可以通过简单地删除样式来撤消它。

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

如何随机播放NodeList

2 个答案: