原生JS查找所有兄弟节点并操作

通过遍历的方式,查找元素的所有兄弟节点

<div class='device fl'>
        <ul>
          <li>选择功能模块</li>
          <li class='on'>通用功能</li>
          <li>自定义功能</li>
        </ul>
      </div>

需要实现的是点击当前元素,移除元素的所有兄弟节点的’on’
直接上代码

mounted () {
     
    let li = document.querySelectorAll('.device li')
    for (let i = 0; i < li.length; i++) {
     
      li[i].onclick = function () {
     
        this.classList.add('on')
        let sb = this.parentNode.children //查找所有节点
        for (let o = 0; o < sb.length; o++) {
     
          if (sb[o].nodeType === 1 && sb[o] !== this) {
      //剔除自己
            sb[o].classList.remove('on') //操作
          }
        }
      }
    }
  }

你可能感兴趣的:(js,vue,前端)