如何用JavaScript批量修改所有class为mainBody的div样式？

你的代码只修改了第一个元素，是因为getElementsByClassName()返回的是所有匹配元素的集合，你通过[0]只选中了第一个。要修改全部元素，需要遍历这个集合里的每一个元素。

方法一：遍历HTMLCollection（原方法优化） #

直接遍历getElementsByClassName返回的集合，对每个元素应用样式：

function goingDark() {
  // 获取所有mainBody元素
  const mainBodies = document.getElementsByClassName("mainBody");
  // 遍历每个元素修改样式
  for (let i = 0; i < mainBodies.length; i++) {
    mainBodies[i].style.backgroundColor = "#242526";
    mainBodies[i].style.color = "#ffffff";
  }
  // 同样遍历所有h2修改颜色
  const headings = document.getElementsByClassName("h2");
  for (let i = 0; i < headings.length; i++) {
    headings[i].style.color = "#ffffff";
  }
}

function goingLight() {
  const mainBodies = document.getElementsByClassName("mainBody");
  for (let i = 0; i < mainBodies.length; i++) {
    mainBodies[i].style.backgroundColor = "#ffffff";
    mainBodies[i].style.color = "#000000";
  }
  const headings = document.getElementsByClassName("h2");
  for (let i = 0; i < headings.length; i++) {
    headings[i].style.color = "#000000";
  }
}

方法二：使用querySelectorAll（更简洁） #

querySelectorAll()返回的是NodeList，支持用forEach()直接遍历，代码更简洁：

function goingDark() {
  document.querySelectorAll(".mainBody").forEach(element => {
    element.style.backgroundColor = "#242526";
    element.style.color = "#ffffff";
  });
  document.querySelectorAll(".h2").forEach(element => {
    element.style.color = "#ffffff";
  });
}

function goingLight() {
  document.querySelectorAll(".mainBody").forEach(element => {
    element.style.backgroundColor = "#ffffff";
    element.style.color = "#000000";
  });
  document.querySelectorAll(".h2").forEach(element => {
    element.style.color = "#000000";
  });
}

额外建议（更专业的写法） #

其实更推荐用CSS类来控制暗黑模式，而不是直接修改行内样式，这样代码更易维护：

1. 先在CSS里定义暗黑模式的类：

.dark-mode .mainBody {
  background-color: #242526;
  color: #ffffff;
}
.dark-mode .h2 {
  color: #ffffff;
}
/* 浅色模式可以用默认样式，或者也定义类 */
.light-mode .mainBody {
  background-color: #ffffff;
  color: #000000;
}
.light-mode .h2 {
  color: #000000;
}

2. 然后JS只需要切换根元素（比如body）的类：

function goingDark() {
  document.body.classList.add("dark-mode");
  document.body.classList.remove("light-mode");
}

function goingLight() {
  document.body.classList.add("light-mode");
  document.body.classList.remove("dark-mode");
}

这种方式不需要遍历所有元素，只操作一次类名，扩展性更强，后续加其他元素的暗黑样式直接在CSS里写就行。

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