Javascript 如何洗牌一个节点列表

假设我有一个节点列表：

list=document.querySelectorAll（'div'）

我想洗牌。我该怎么做

我遇到的唯一答案是，使用

var arr=[].concat（x）

类似地，建议如下（将节点列表转换为
数组
）：

我的问题是，如果不将节点列表转换为数组，是否就没有办法做到这一点

而且，上述两种方法中哪一种更好

而且，一旦将节点列表转换为数组，在对数组的某些成员进行操作时是否会发生任何变化？（即，从阵列中删除一个节点是否会从节点列表中删除该节点）？
如果需要更改元素的顺序，这可能会对您有所帮助

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

工作

旁注：concat（）通常较慢
现代的替代方法可能是使用CSS网格或Flexbox Order属性。这种方法的优点是，只需删除样式即可撤消

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

哇。我喜欢这个。但它在做什么？似乎
appendchild
会复制列表上的项目？为什么必须使用
呢？它不会重复，请检查DOM:）确保
是位OR运算符。如果x或y是1，那么x或y会产生1。我知道这一点，但它似乎仍然可以为索引返回一个小数点。我喜欢这个，我只是想理解it@Startec
Math.random（）*i
在本例中，肯定会返回一个十进制，但这就是我使用位运算符的原因
0.2523864833638072 | 0=0
，
8.545993074742 | 0=8
等等。正如我所说，这不会复制元素，因为我们实际上是在同一父级中替换它们（添加到末尾）。这可能会多次替换（重新排序）一个元素，但没有问题；正如您所看到的，有（list.length+1）个迭代。这不适用于
节点列表
，它只适用于特定元素及其子元素。
    var Scramble = function(){
        [].slice.call( document.querySelectorAll(".myClass") ).filter( function( _e ){
            _e.style.order =  (Math.floor(Math.random() * (10) + 1));
        } );
    }