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"
    }
  },