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

在使用jquery中，我们通常会选择siblings()去选择相邻元素，使用eq()方法去匹配元素，使用index()获取对应元素的索引值，具体jquery代码如下:

 <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>

　　从上以上jquery代码可以很简单的实现了相邻元素的匹配筛选以及获取当前点击的索引值，然而在js中获取索引以及筛选相邻元素是这样的：

(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
				}
			}

　　通过以上代码我们可知，jquey中api方法无论是筛选元素还是选择相邻元素，都会比js要简单得多，但原生js一些思想以及这里涉及的一些自定义属性的使用还是很基础的，以上简单的两个场景在使用jquery中非常简单，但原生js原理的思想还是要根深蒂固，基础性的东西还是很重要的