在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原理的思想還是要根深蒂固，基礎性的東西還是很重要的