使用document.querySelectorAll无法选中.button类按钮的问题求助

我看了你的代码和问题，核心问题其实不是querySelectorAll没选中按钮，而是你对它返回的结果用法错啦！

先看你写的JS代码：

let variable = document.querySelectorAll(".button");
variable.classList.toggle("darkbuttons");

document.querySelectorAll(".button")确实能选中所有带.button类的按钮，但它返回的是一个NodeList（节点列表）——也就是多个元素的集合，而classList是单个DOM元素才有的属性，你直接在集合上调用classList自然会失效，甚至控制台应该会报错哦。而getElementById返回的是单个元素，所以能正常调用classList方法。

解决方法很简单，遍历集合里的每个按钮，逐个操作就行： #

方法1：用forEach遍历（推荐，写法简洁）

let variable = document.querySelectorAll(".button");
// 遍历每个按钮，切换类名
variable.forEach(button => button.classList.toggle("darkbuttons"));

方法2：用for...of循环

let variable = document.querySelectorAll(".button");
for (const button of variable) {
  button.classList.toggle("darkbuttons");
}

另外还要注意一个小细节：确保你的JS代码是在DOM加载完成后执行的！如果你的JS写在<head>里，可能会出现DOM还没渲染完就执行代码，导致选不到元素的情况。可以把代码放在页面底部（</body>标签之前），或者包裹在DOMContentLoaded事件里：

document.addEventListener('DOMContentLoaded', function() {
  let variable = document.querySelectorAll(".button");
  variable.forEach(button => button.classList.toggle("darkbuttons"));
});

这样就能正常给所有.button类的按钮切换darkbuttons样式啦！

备注：内容来源于stack exchange，提问作者Ayush Sharma