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

最新推荐文章于 2024-08-20 22:43:53 发布

原创最新推荐文章于 2024-08-20 22:43:53 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #前端

本文介绍了一种使用JavaScript遍历DOM元素并移除其兄弟节点特定样式的实现方法。通过具体代码示例，展示了如何在点击事件中动态调整页面元素的样式，适用于前端开发中菜单项选中状态的切换。

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

<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') //操作
          }
        }
      }
    }
  }