如何实现点击元素时为所有同级元素添加同一class？

当前你的代码点击.img_items元素时仅会给当前点击的单个元素添加select类，而尝试直接调用images.classList.add("select")无效，是因为document.querySelectorAll()返回的是NodeList集合，不是单个DOM元素，集合本身没有classList属性，必须遍历集合内的每个元素才能操作类名。

要实现点击任一元素时为所有同级元素（也就是所有.img_items元素）添加select类，只需要在点击事件回调里遍历整个images集合，给每个元素都添加类即可：

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    // 遍历所有.img_items元素，给每个都加上select类
    images.forEach(item => {
      item.classList.add("select");
    });
  });
});

如果需要先清除之前的select类再统一添加（比如切换状态场景），可以先调用classList.remove("select")：

const images = document.querySelectorAll(".img_items");

images.forEach((image) => {
  image.addEventListener("click", () => {
    // 先移除所有元素的select类（可选，根据需求调整）
    images.forEach(item => {
      item.classList.remove("select");
    });
    // 再给所有元素添加select类
    images.forEach(item => {
      item.classList.add("select");
    });
  });
});

你的HTML和CSS代码可保持不变：

<div class="img_container">
  <div class="img_items ">1</div>
  <div class="img_items ">2</div>
  <div class="img_items">3</div>
  <div class="img_items">4</div>
</div>

.img_items::after{
  content: ' ' attr(class)
}

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