Simple Note

如何反转DOM元素子元素的顺序

2016.03.30

最近遇到的问题,一开始想到的解决方法是利用数组的reverse方法,以body元素的子元素为例:

var body = document.body;
var reverseNodes = Array.from(body.children).reverse();
body.innerHTML = '';
reverseNodes.forEach(function(v){
    body.appendChild(v);
});

这个办法最明显的缺点是多次修改DOM,于是用文档碎片改进了下:

var body = document.body;
var docFragment = document.createDocumentFragment();
var reverseNodes = Array.from(body.children).reverse();
body.innerHTML = '';
reverseNodes.forEach(function(v){
    docFragment.appendChild(v);
});
body.appendChild(docFragment);

事后发现,appendChild有一个很重要的特性我没有用上:如果待插入节点已经在文档中,会先从文档中删除该节点,再重新插入到新位置。所以,并不需要事先用innerHTML清空子元素。

在网上看到了更简洁的实现,摘录如下:

function reverseChildNodes(node) {
    var frag = node.ownerDocument.createDocumentFragment();
    while(node.lastChild)
        frag.appendChild(node.lastChild);
    node.appendChild(frag);
}
reverseChildNodes(document.body);

利用lastChild就不需要之前代码中的数组遍历和reverse操作。

Comments
Write a Comment