在js中怎么样选择互斥的相邻元素

<style>
*{padding:0px;margin:0px;}
ul li{list-style:none;}
.box ul li{padding:10px 0px;}
.active{background:red;}
</style>
div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
$(".box").find("li").on("click",function(){
<script type='text/javascript' src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(".box").find("li").on("click",function(){
var $index = $(this).index();//获取点击当前的索引
$(this).addClass("active").siblings("li").removeClass("active");//为当前点击元素添加class,移除相邻兄弟元素li的active
console.log($index);
});
var $li = $(".box li").eq(0);//获取第一li
console.log($li);</script>

(function(){
var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式
var ulDom = boxDom.getElementsByTagName("ul")[0];
var liDom = ulDom.getElementsByTagName("li");
for(var i=0;i<liDom.length;i++){
liDom.index = i;//当前的索引值，添加一个自定义索引,自定义属性值,index是每一个li上自定义的索引值liDom[i].onclick = function(){
//for循环,先清除所有的样式，再添加当前需要的样式
for(var j=0;j<liDom.length;j++){
liDom[j].className = "";//所有的li清除样式，0 1 2
};
this.className = "active"//为当前点击的class添加样式 console.log(this.index);//对应每一个点击li获取当前的index索引，0,1,2
}
}
})()

var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式
var boxDom = document.getElementsByClassName("box")[0];//获取class的一种方式
var ulDom = boxDom.getElementsByTagName("ul")[0];
var liDom = ulDom.getElementsByTagName("li");
//初始化值
var oli = null,num=0;//oli是上一次的值,num是初始值
oli = liDom[num];
for(var i=0;i<liDom.length;i++){
liDom.index = i;//当前的索引值，添加一个自定义索引liDom[i].onclick = function(){oli.className = "";//将所有oli的class值清除
oli = this;//记录上一次的class
this.className = "active";//添加当前点击的class
}
}