如何修改无ID元素的类名？解决li元素类名修改失效问题

你遇到的问题核心在于：document.querySelectorAll('li')返回的是一个NodeList（节点列表），它是一组DOM元素的集合，而不是单个元素。集合本身并没有className或classList属性，所以直接给整个集合赋值肯定不会生效——这些属性只能作用于单个DOM元素。

下面给你两种可行的解决方式：

方法1：用forEach遍历处理（现代浏览器推荐） #

利用NodeList自带的forEach方法，逐个遍历每个<li>元素，替换类名：

// 方式A：精准替换（移除旧类，添加新类，保留其他可能存在的类）
document.querySelectorAll('li').forEach(li => {
  li.classList.remove('bearname');
  li.classList.add('corgitype');
});

// 方式B：直接覆盖类名（仅适用于<li>只有bearname这一个类的场景）
document.querySelectorAll('li').forEach(li => {
  li.className = 'corgitype';
});

// 方式C：用classList的replace方法（最简洁，现代浏览器原生支持）
document.querySelectorAll('li').forEach(li => {
  li.classList.replace('bearname', 'corgitype');
});

方法2：兼容旧浏览器的for循环 #

如果需要支持不支持NodeList.forEach的老浏览器（比如IE11），可以用传统的for循环：

const liElements = document.querySelectorAll('li');
for (let i = 0; i < liElements.length; i++) {
  // 可选择上面任意一种替换方式
  liElements[i].classList.replace('bearname', 'corgitype');
}

简单总结下：你需要操作集合里的每一个元素，而不是集合本身，这样才能成功替换类名。

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