關於DOM節點的逆序

![](https://images0.cnblogs.com/blog/588990/201410/200944383875171.jpg)


今天刷微博的時候看到了這個，居然敢黑我大JQ！瞬間就忍不住了！

```javascript
  var parentNode = document.querySelector(".reverse");
  var nodeArr = [];
  nodeArr = [].concat.apply(nodeArr, parentNode.children).reverse();
  while(nodeArr.length>0){
    parentNode.appendChild(nodeArr.shift())
    console.log(nodeArr)
  }
```

上面是JS的,接下來寫一段JQ的

```
  var parentNode = $('.reverse');
  var childNode = parentNode.children();
  $.each(childNode,function(index,node){
    $(node).prependTo(parentNode);
    console.log(index,node)
  })
```

上面的代碼看上去的思路都應該很清晰，接下來簡化下代碼。
```
var parentNode = document.querySelector('.reverse');
[].slice.apply(parentNode.children).reverse().reduce(function(x,y){parentNode.appendChild(y)});
```
`querySelector`和`reduce`都是Ecmascript5裏面的新方法，固然若是你要喪心病狂的把parentNode替換掉的話，我也不反對。。

接下來看！！！簡化的JQ多簡單！！！1行！！只要1行！！！
```
$.each($('.reverse').children(),function(index,node){$(node).prependTo(parentNode);})
```