JavaScript 调整li元素上下顺序
分享一段代码实例，他实现了点击按钮来调整li元素上下顺序的功能。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.box {
width: 500px;
margin: 0 auto;
padding: 0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.box ul li {
height: 30px;
line-height: 30px;
background: #eee;
margin-top: 10px;
}
.box ul li em {
font-style: normal;
width: 370px;
display: inline-block;
}
.box ul li a {
padding: 0 10px;
}
</style>
<script>
window.onload = function () {
var oUl = document.getElementsByTagName("ul")[0];
var oBtn = document.getElementsByTagName("a");
for (var index = 0; index < oBtn.length; index++) {
if (index % 2) {
oBtn[index].onclick = function () {
var oPar = this.parentNode;
if (oPar == oUl.children[oUl.children.length - 1]) {
alert('到底了，不能再点了！');
return false;
}
var oNext = oPar.nextElementSibling || oPar.nextSibling;
var oNext2 = oNext.nextElementSibling || oNext.nextSibling;
oUl.insertBefore(oPar, oNext2)
}
} else {
oBtn[index].onclick = function () {
var oPar = this.parentNode;
if (oPar == oUl.children[0]) {
alert('到顶了，不能再点了！');
return false;
}
var oPvr = oPar.previousElementSibling || oPar.previousSibling;
oUl.insertBefore(oPar, oPvr);
}
}
}
}
</script>
</head>
<body>
<div class="box" id="box">
<ul>
<li><a href="javascript:;">上移</a><em>前端教程网欢迎您</em><a href="javascript:;">下移</a></li>
<li><a href="javascript:;">上移</a><em>本站的url地址是www.pipipi.net</em><a href="javascript:;">下移</a></li>
<li><a href="javascript:;">上移</a><em>只有努力才会有美好的未来</em><a href="javascript:;">下移</a></li>
<li><a href="javascript:;">上移</a><em>分享和互助才能推动个人的进步</em><a href="javascript:;">下移</a></li>
<li><a href="javascript:;">上移</a><em>这是一个简单的效果</em><a href="javascript:;">下移</a></li>
</ul>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var oUl = document.getElementsByTagName("ul")[0]，获取集合中的第一个ul元素对象。
（3）.var oBtn = document.getElementsByTagName("a")，获取链接a元素集合。
（4）.for (var index = 0; index < oBtn.length; index++) {},遍历每一个链接a元素。
（5）.if (index % 2) ，如果索引值为奇数，也就是右侧的链接。
（6）.oBtn[index].onclick = function () {}，为链接a元素注册click事件处理函数。
（7）.var oPar = this.parentNode，获取当前链接a元素的父元素，也就是所在的li元素。
（8）.if (oPar == oUl.children[oUl.children.length - 1]) {
alert('到底了，不能再点了！');
return false;
}，如果当前所在的li元素的索引值等于oUl.children.length - 1，也就说明到底了。
（9）.var oNext = oPar.nextElementSibling || oPar.nextSibling，获取oPar的下一个节点，如果支持nextElementSibling则获取元素节点，否则使用nextSibling获取节点（这时候可能是空白或者元素节点）。
（10）.var oNext2 = oNext.nextElementSibling || oNext.nextSibling，和上面是一样的道理。
（11）.oUl.insertBefore(oPar, oNext2)，将opar元素插入到它后面节点紧邻的节点前面，如果有节点1,2,3,那么就是将1节点插入到2节点后面的节点3的前面，也就是插入到2和3之间。
二.相关阅读:
（1）.getElementsByTagName()参阅document.getElementsByTagName()一章节。
（2）.parentNode参阅JavaScript parentNode一章节。
（3）.children参阅JavaScript children一章节。
（4）.nextElementSibling参阅JavaScript nextElementSibling一章节。
（5）.nextSibling参阅JavaScript nextSibling一章节。
（6）.previousSibling参阅JavaScript previousSibling一章节。
（7）.previousElementSibling参阅JavaScript previousElementSibling一章节。
（8）.insertBefore()参阅JavaScript insertBefore()一章节。
JavaScript 调整li元素上下顺序，这样的场景在实际项目中还是用的比较多的，关于JavaScript 调整li元素上下顺序就介绍到这了。
JavaScript 调整li元素上下顺序属于前端实例代码，有关更多实例代码大家可以查看。