js获取元素本身及获取其所有兄弟元素(js及vue不同)

点击后获取元素本身

<div onclick="active(this)">点我</div>   //传this进去，this即元素本身
 
<script>
    function active(elem){
        console.log(elem)   //这里即可获取到元素本身
        elem.setAttribute("class","selected")   //这里获取到的元素本身可以直接js操作
    }
</script>

获取当前元素的所有兄弟元素

<div onclick="active(this)">点我</div>
<div onclick="active(this)">点你</div>
<div onclick="active(this)">点他</div>

<script>
    function active(elem){
        var r = [];   //这是jquery获取兄弟元素函数的源码
        var n = elem.parentNode.firstChild;  
        for (; n; n = n.nextSibling) {
            if (n.nodeType === 1 && n !== elem) {
                r.push(n);
            }
        }
        return r;
    }
</script>

在vue里是这样的

<div @click = “clickfun($event)”> <span>点击<span> </div>   // ($event) 也可省略不写

methods: {
    clickfun(e) {
      console.log(e.target)    //指向触发监听事件的对象，即是你当前所点击的元素。(意思是div及其内部的元素，点击哪个就会获取哪个，比如点击div内部的span，获取的就是span元素)
      console.log(e.currentTarget)    //指向添加监听事件的独享，即是你所绑定事件的元素。(意思是只要点击div或其内部元素，如就算点击div内部的span，获取的只会是绑定了clickfun事件的div元素)
    }
  },

vue举例

<ul>
    <li>
        <div @click = “clickfun($event)”> <span>删除<span> </div>
    </li>
    <li>
        <div @click = “clickfun($event)”> <span>删除<span> </div>
    </li>
</ul>

methods: {
    //点击删除后，使当前元素父元素隐藏
    clickfun(e) {
        let theNode=e.currentTarget.parentNode
        theNode.style.display="none"
    }
  },