JavaScript中仅for循环出现TypeError: undefined问题（非越界错误）

核心原因 #

你遇到的items[i] is undefined错误，大概率是因为你获取的items是动态HTMLCollection（比如通过document.getElementsByClassName/document.getElementsByTagName获取的集合），这类集合会随DOM结构的实时变化而更新。当你在循环中修改innerHTML时，DOM结构发生改变，导致集合的长度或元素组成动态变化，循环到后期时i对应的元素已经不存在于集合中，从而抛出未定义错误。

而单独执行items[0].innerHTML = "test"时，只修改了单个元素，DOM变化未影响集合的整体结构，所以不会报错；注释掉innerHTML语句后，仅执行classList.remove不会改变元素在集合中的存在状态（只要元素的类名没被移除），因此循环能正常完成。

解决办法 #

将动态集合转换为静态数组，确保循环过程中遍历的元素列表不会随DOM变化而改变，具体有两种实现方式：

方式1：转换为数组后用普通for循环

function activeStatus(e) {
  const target = e.target;
  if (target.classList.contains('itm-active')) return;

  // 将动态HTMLCollection转为静态数组
  const items = Array.from(document.getElementsByClassName('your-item-class'));
  for (let i = 0; i < items.length; i++) {
    items[i].classList.remove('itm-active');
    items[i].innerHTML = "test"; // 此时不会再出现未定义错误
  }

  target.classList.add('itm-active');
  // 设置当前点击元素的文本
  target.innerHTML = "已选中";
}

方式2：用forEach遍历数组

function activeStatus(e) {
  const target = e.target;
  if (target.classList.contains('itm-active')) return;

  // 转换为数组后直接遍历
  Array.from(document.getElementsByClassName('your-item-class')).forEach(item => {
    item.classList.remove('itm-active');
    item.innerHTML = "test";
  });

  target.classList.add('itm-active');
  target.innerHTML = "已选中";
}

额外检查点 #

如果转换为数组后仍报错，需检查你修改innerHTML的代码是否意外移除了元素的目标类名（比如你的items是按类名btn-item获取的，但修改innerHTML时把该类名从元素中删掉了），这种情况会导致元素从原动态集合中消失，但转换为静态数组后不会有这个问题，所以大概率是前者的问题。

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