纯JavaScript如何选择除当前点击元素外的所有.dummy类元素？

其实这个需求的实现思路和你用jQuery的方式几乎一致，核心就是先缓存所有目标元素，然后在点击事件里过滤掉当前触发事件的元素就行。直接上代码示例：

// 先缓存所有.dummy元素，避免每次点击都重新查询DOM
const dummyElements = document.querySelectorAll('.dummy');

// 给每个元素绑定点击事件
dummyElements.forEach(element => {
  element.addEventListener('click', function() {
    // 将NodeList转为数组，然后过滤掉当前点击的元素
    const otherDummies = Array.from(dummyElements).filter(el => el !== this);
    
    // 这里就可以对otherDummies执行你需要的操作了，比如添加高亮样式
    otherDummies.forEach(el => {
      el.classList.add('active');
    });
    // 顺便可以移除当前元素的样式（如果需要的话）
    this.classList.remove('active');
  });
});

关键点说明： #

• document.querySelectorAll('.dummy')返回的是NodeList，不是数组，所以我们用Array.from()把它转换成数组，这样就能使用数组的filter()方法来筛选元素。现代浏览器里也可以用扩展运算符[...dummyElements]来转换，效果一样。
• 过滤条件el !== this就对应jQuery里的.not(this)，精准排除当前点击的元素。
• 提前缓存dummyElements的做法和你jQuery里缓存$dummy的思路一致，能减少DOM查询次数，提升性能。

如果你的操作比较简单，也可以直接在遍历的时候判断，不用单独生成otherDummies数组，比如：

dummyElements.forEach(element => {
  element.addEventListener('click', function() {
    dummyElements.forEach(el => {
      if (el !== this) {
        // 对非当前元素执行操作
        el.style.color = 'red';
      } else {
        // 当前元素的操作
        el.style.color = 'black';
      }
    });
  });
});

这种写法更直接，适合逻辑简单的场景。

内容的提问来源于stack exchange，提问作者olo