JS获取兄弟节点

情景

点击li标签，会给每个li添加高亮显示

实现

如果用jq实现的话非常的方便，直接获取父节点，再获取子节点并移除所有类，对当前元素添加即可
思路主要就是：

1. 移除所有元素的高亮对应的类名
2. 给当前点击元素添加高亮的类

使用js时也是同样的思路，先通过parentNode获取父亲节点，再获取其children的所有节点，之后遍历即可

 const imgs = document.querySelectorAll('main li')

  // 给每个li添加点击事件
  imgs.forEach((li, index) => {
    li.addEventListener('click', (e) => {
      // 移除兄弟节点的选择类
	//获取到的parentNode.children不能使用forEach
      Array.from(li.parentNode.children).forEach(lis => {
        lis.classList.remove('imgSelect')
      })
      li.classList.toggle('imgSelect')

    })
  })

效果展示

此时就是点击哪个元素哪个元素就高亮