js倒序（js倒序遍历）

想到某个节点里面的子元素反转过来排序。就是 1-2-3-4-5 转成 5-4-3-2-1，如果用 JavaScript 的话，用 reverse 方法就可以，但 DOM 的话，要怎样操作呢？

<div id=\\\"container\\\">    这是一行需要被反转的标签1<br>    这是一行需要被反转的标签2<br>    这是一行需要被反转的标签3<br>    这是一行需要被反转的标签4<br>    这是一行需要被反转的标签5</div>// 想要的结果<div id=\\\"container\\\">    这是一行需要被反转的标签5<br>    这是一行需要被反转的标签4<br>    这是一行需要被反转的标签3<br>    这是一行需要被反转的标签2<br>    这是一行需要被反转的标签1</div>

这里面有 4 个元素，可以用 children 方法来查看下，结果显示 4 个br元素。

但我们的文字也要反转，所以，我们需要的是去获取节点，使用 childNodes ，结果显示为有 9 个节点，接下来，我们反转节点。

方法一：

我们可以先获取所以元素节点，转成普通数据，随后，把节点从 DOM 树中遍历删除，再接下来反转数组，再遍历添加到 DOM 上。

let container = document.getElementById(\\\'container\\\');let arr = Array.prototype.slice.call(container.childNodes)for(let dom of arr ){    container.removeChild(dom);}arr.reverse();for(let dom of arr){    container.appendChild(dom);}

方法二：

获取到所有节点，然后向前循环节点，并插入到最下面。appendChild 添加的是当前文档中存在的节点，会先移除节点，并添加到指定位置。

let container = document.getElementById(\\\'container\\\');let len = container.childNodes.length;while(len-- > 0){    container.appendChild(container.childNodes[len])}

方法三：

使用 Range 方法，此方法不在乎层级关系，并且选中的节点，可以是半个节点（因为会自动补充完整节点）。

我们先设置开始节点和结束节点，然后把 Range 添加到 DocumentFragment 上，DocumentFragment 属于 Node 节点中的子类。

再然后，我们遍历节点，并添加到 frament 上。

操作 DocumentFragment 不会影响到我们现有的文档，对性能的影响降到最低。

let container = document.getElementById(\\\'container\\\');let range = new Range();range.setStart(container,0);//设置开始节点range.setEnd(container,container.childNodes.length);//设置结束节点let frament = range.extractContents();//把 Range 添加到 DocumentFragment
let len = frament.childNodes.length;while(len-- > 0){    frament.appendChild(frament.childNodes[len])}container.appendChild(frament);

图片授权基于 www.pixabay.com 相关协议

原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34574.html