多同class元素操作报错：classList调用失败，求正确选择器方案

错误原因分析 #

1. getElementsByClassName 参数错误：这个方法接收的是纯类名字符串，不需要加前缀 .，你写的 .main 是无效类名，会导致获取不到元素。
2. 集合无法直接调用 classList：getElementsByClassName 返回 HTMLCollection，querySelectorAll 返回 NodeList，二者都是元素集合，不是单个DOM元素，直接在集合上调用 classList.add 自然会报错（集合本身没有 classList 属性）。

正确实现方案 #

方案1：使用 getElementsByClassName（修正参数+遍历）

// 去掉类名前的.，只传纯类名
let mainElements = document.getElementsByClassName("main");
// 遍历HTMLCollection（类数组结构，用普通for循环）
for (let i = 0; i < mainElements.length; i++) {
  mainElements[i].classList.add('d-flex');
}

方案2：使用 querySelectorAll（遍历集合）

这个方法的参数是CSS选择器，所以 .main 是正确的，只需遍历集合操作每个元素：

let mainElements = document.querySelectorAll(".main");
// 现代浏览器可直接用forEach遍历NodeList
mainElements.forEach(element => {
  element.classList.add('d-flex');
});

// 兼容IE等旧浏览器的写法：转成数组再遍历
Array.from(mainElements).forEach(element => {
  element.classList.add('d-flex');
});

关键提示 #

• 如果只需要操作单个元素，可以用 document.querySelector(".main")（返回第一个匹配的元素），此时能直接调用 classList.add。
• 集合类型的返回值必须遍历每个元素才能进行DOM操作，这是最容易踩的坑。

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