JS中forEach内使用classList.add失效，报错imgg.classList未定义

错误原因 #

你用document.querySelectorAll("img")获取的imgg是NodeList元素集合，不是单个DOM节点，集合本身没有classList属性，所以直接调用imgg.classList.add()会报错"imgg.classList is undefined"。

从你的DOM结构来看，应该是希望悬停某个H1时，给它所在容器内的对应IMG加类，而非所有IMG，所以需要定位到当前H1关联的单个IMG元素。

修正代码（针对当前H1对应的IMG） #

<div id="section">
  <div class="item">
    <div>
      <h1>Scaleboot</h1>
      <img src="./img.gif" />
    </div>
    <h2>
      Service to validate minimum viable products & launch them successfully
    </h2>
  </div>
  <div class="item">
    <div>
      <h1>Scaleboot</h1>
      <img src="./img.gif" />
    </div>
    <h2>
      Service to validate minimum viable products & launch them successfully
    </h2>
  </div>
  <div class="item">
    <div>
      <h1>Scaleboot</h1>
      <img src="./img.gif" />
    </div>
    <h2>
      Service to validate minimum viable products & launch them successfully
    </h2>
  </div>
</div>
<script>
  const h1Elements = document.querySelectorAll("h1");
  h1Elements.forEach((h1) => {
    // 鼠标悬停时给对应IMG加类
    h1.addEventListener("mouseover", () => {
      // 通过父容器找到当前H1对应的IMG
      const targetImg = h1.parentElement.querySelector("img");
      targetImg.classList.add("ishover");
    });
    // 鼠标移出时移除类（可选，提升交互体验）
    h1.addEventListener("mouseout", () => {
      const targetImg = h1.parentElement.querySelector("img");
      targetImg.classList.remove("ishover");
    });
  });
</script>

如果需要给所有IMG加类 #

若你的需求是悬停任意H1时给页面所有IMG加类，只需遍历imgg集合操作每个元素：

const imgg = document.querySelectorAll("img");
const h1Elements = document.querySelectorAll("h1");
h1Elements.forEach((h1) => {
  h1.addEventListener("mouseover", () => {
    imgg.forEach(img => img.classList.add("ishover"));
  });
  h1.addEventListener("mouseout", () => {
    imgg.forEach(img => img.classList.remove("ishover"));
  });
});

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