<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{margin:0;padding:0}
li{width:30px;margin: 10px auto;list-style: none;}
</style>
</head>
<body>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</body>
</html>
<script type="text/javascript">
var aLi=document.getElementsByTagName('li');
var j=0;
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
(function(index){
aLi[i].οnmοuseοver=function(){
this.style.color="red";
if (index<3) {
this.nextElementSibling.style.color="green";
}
alert(index+1);
};
})(i);
};
</script> HTML DOM element.nextElementSibling属性; 返回指定元素之后的下一个兄弟元素
使用nextElementSibling属性返回指定元素之后的下一个兄弟元素，（即：相同节点树层中的下一个元素节点）。
nextSibling属性与nextElementSibling属性的差别：
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点）；nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）；
nextElementSibling属性为只读属性。
