如何用JavaScript将按钮的class从dropdown-item active改为dropdown-item？

你写的代码存在问题：document.getElementsByClassName("dropdown-item active")返回的是元素集合（HTMLCollection），不是单个DOM元素，直接给集合赋值className不会生效，且链式赋值的写法逻辑错误。

下面是几种可行的正确实现方式：

方法1：用querySelector精准选中（推荐） #

querySelector支持复合选择器，能直接定位到第一个匹配的元素，操作简洁且安全：

const activeItem = document.querySelector(".dropdown-item.active");
if (activeItem) {
  // 移除active类，保留原有的dropdown-item类
  activeItem.classList.remove("active");
  
  // 若确定只需要保留dropdown-item类，也可直接赋值：
  // activeItem.className = "dropdown-item";
}
console.log(activeItem);

方法2：处理getElementsByClassName返回的集合 #

如果坚持使用getElementsByClassName，需要从返回的集合中取出第一个元素再操作：

const activeItems = document.getElementsByClassName("dropdown-item active");
// 先判断集合是否有元素，避免报错
if (activeItems.length > 0) {
  const oldSelected = activeItems[0];
  oldSelected.className = "dropdown-item";
  console.log(oldSelected);
}

注意：优先用classList操作类名 #

classList.remove("active")比直接覆盖className更稳妥——如果后续这个按钮需要添加其他类名，直接修改className会清空所有已有类，而classList的方法只会操作指定类，不会影响其他样式类。

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