上下一个兄弟节点,第一个和最后一个子节点[不兼容]:
兼容性问题解决方案:
var oNext = obj.nextElementSibling || obj.nextSibling;
obj.nextSibling:
所有的浏览器都支持这个方法,只不过高版本浏览器[IE9+]中会识别文本节点[普通文字,空格,空行]; 低版本里面就是元素节点[li,p,span···],
obj.nextElementSibling:
高版本浏览器兼容;不兼容IE8--;如果低版本浏览器不识别的话会报错undefined;undeifned就是false;
上移下移:
window.onload=function(){
var oBox=document.getElementById("box");
var aA=document.getElementsByTagName('a')
for(var i=0;i<aA.length;i++){
if(i%2==0){ //上移;
aA[i].onclick=function(){
var obj=this.parentNode; //当前点击的父级(li);
var oPrev=obj.previousElementSibling||obj.previousSibling; //当前点击父级(li)的上一个兄弟节点
if(obj==oBox.children[0]){ //如果是第一个了,就不上移了;
alert('不能再上移了')
}
oBox.insertBefore(obj,oPrev); //obj插到oPrev前面,实现上移;
}
}
else{ //下移
aA[i].onclick=function(){
var obj=this.parentNode;
var oNex=obj.nextElementSibling||obj.nextSibling;
if(obj==oBox.children[oBox.children.length-1]){ //如果是最后一个,就不下移了;
alert('不能再下移了')
}
oBox.insertBefore(oNex,obj);//oNex插到obj前面,实现下移;
}
}
}
}