原生 JS如何实现类似Jquery的siblings功能？

Question

如题：比如我body里面有这么几个链接：    <a href="javascript:;">连接一</a>    <a href="javascript:;">连接二</a>    <a href="javascript:;">连接三</a>    <a href="javascript:;">连接四</a>    <a href="javascript:;">连接五</a>    <a href="javascript:;">连接六</a>    <a href="javascript:;">连接七</a>    <a href="javascript:;">连接八</a>    <a href="javascript:;">连接九</a>var link = document.getElementsByTagName("a");for (var i = 0; i < link.length; i++) {    link[i].addEventListener("click", function() {        this.style.backgroundColor = "#000";    })}现在能实现单击其中一个链接改变它的背景色，但是如何能实现JQ中很容易实现的功能，点击其中一个，其它的样式也同时变了（切换）。

Answer 1

<style>

body{

  background:#CCC;

}

a{

  display:inline-block;

  width:100px;

  padding:5px 10px;

  background:#666;

  text-align:center;

  color:#FFF;

  border:solid 3px #333;

  margin:1px;

}

a.active{

  background-color:#FF0;

  border-color:#C00;

  color:#C00;

}

</style>

<div id="parent">

  <a href="javascript:;">连接一</a>

  <a href="javascript:;">连接二</a>

  <a href="javascript:;">连接三</a>

  <a href="javascript:;">连接四</a>

  <a href="javascript:;">连接五</a>

  <a href="javascript:;">连接六</a>

  <a href="javascript:;">连接七</a>

  <a href="javascript:;">连接八</a>

  <a href="javascript:;">连接九</a>

</div>

<script>

document.getElementById("parent").addEventListener("click", function(event){

    if( event.srcElement.tagName.toLowerCase() == "a" ){

        if( this.lastClick != event.target){

            event.target.className = "active";

            if( !!this.lastClick){

                this.lastClick.className = "";

            }

            this.lastClick = event.target;

        } else {

            console.log("重复点击不触发");

        }

    }

});

</script>