修改getElementsByClassName返回元素类名出现NaN/undefined问题

你的猜测完全正确，另外代码里还有两个错误共同导致了异常：

• getElementsByClassName 返回值是实时动态DOM集合，不是固定的元素快照：遍历过程中只要元素的类名变化、不再匹配选择器，就会立刻从集合中被移除，集合长度、元素索引都会实时刷新。按正序索引遍历的时候，每次修改完一个元素的类名，后面的元素就会往前补位，循环索引递增后会直接跳过元素，等索引超过集合实时长度时，取到的就是undefined。
• className是字符串类型，对字符串使用-=运算符属于非法操作：JS不存在字符串减法逻辑，执行运算时会先把两端的值尝试转成数字，类名字符串转数字失败就会得到NaN，这就是你看到NaN值的来源。
• 初始状态判断多写了前置空格：toggle1.className === " white" 里字符串开头的空格是多余的，实际元素初始类名是white没有前置空格，这个判断逻辑本身就不成立。

优先用现代DOM API操作，不要手动拼接className字符串，两种推荐写法：

写法1：动态集合转静态数组 #

拿到集合后立刻展开为数组，固定住要操作的元素列表，遍历过程不受DOM变化影响，用原生classList方法增删类名，避免字符串运算错误：

const toggle1 = document.getElementById("toggle1");
toggle1.addEventListener("click", Colortoggle);

function Colortoggle() {
  const isWhite = toggle1.classList.contains("white");
  // 把动态集合转为静态数组快照
  const nodeList = isWhite 
    ? [...document.getElementsByClassName("white")]
    : [...document.getElementsByClassName("black")];

  nodeList.forEachforEach(item => {
    if (isWhite) {
      item.classList.remove("white");
      item.classList.add("black");
    } else {
      item.classList.remove("black");
      item.classList.add("white");
    }
  })
  console.log("colortoggle was finished");
}

写法2：直接使用静态选择器 #

用querySelectorAll替代getElementsByClassName，这个方法返回的是静态NodeList，不会随DOM更新实时变化，天然适合批量遍历操作，代码更简洁：

function Colortoggle() {
  const isWhite = toggle1.classList.contains("white");
  // 直接获取静态元素集合
  const nodeList = isWhite 
    ? document.querySelectorAll(".white")
    : document.querySelectorAll(".black");

  nodeList.forEach(item => {
    item.classList.toggle("white", !isWhite);
    item.classList.toggle("black", isWhite);
  })
  console.log("colortoggle was finished");
}

原有CSS和HTML代码不需要修改，替换JS代码后即可实现点击批量切换所有方块颜色的效果，不会再出现undefined和NaN异常。

不推荐倒序遍历动态集合的写法，虽然能绕过索引错位问题，但代码可读性差，后续维护容易出问题。

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