JS为元素添加类名：修正代码及批量添加类名方法咨询

嘿，很高兴你已经揪出了classname的拼写bug（正确写法是className）！接下来要给所有带有liHome类的元素都加上active类，核心思路就是遍历所有匹配到的元素集合——因为getElementsByClassName()返回的不是单个元素，而是包含所有匹配项的HTMLCollection。下面给你几个靠谱的实现方式：

方法1：基础for循环（兼容性拉满） #

如果需要兼容一些老旧浏览器，用传统的for循环最稳妥：

// 获取所有带liHome类的元素
const liElements = document.getElementsByClassName('liHome');

// 逐个遍历处理
for (let i = 0; i < liElements.length; i++) {
  // 给当前li添加active类
  liElements[i].className += ' active';
  // 顺便找到内部的aHome元素也加上类
  const targetA = liElements[i].getElementsByClassName('aHome')[0];
  if (targetA) { // 先判断元素存在，避免报错
    targetA.className += ' active';
  }
}

小提醒：直接用className += ' active'时，要注意如果元素原本没有类名，开头的空格不会有问题，但如果担心重复添加active，可以先判断类名是否存在再操作。

方法2：用classList.add()更省心（推荐） #

现代浏览器支持的classListAPI简直是处理类名的神器，add()方法会自动跳过已存在的类名，不会重复添加，写法也更清爽：

const liElements = document.getElementsByClassName('liHome');

// 把HTMLCollection转成数组，就能用forEach遍历了
Array.from(liElements).forEach(li => {
  li.classList.add('active');
  // 用querySelector找子元素更灵活
  const targetA = li.querySelector('.aHome');
  if (targetA) {
    targetA.classList.add('active');
  }
});

要是你用的是比较新的浏览器，还可以用展开运算符简化数组转换：[...liElements].forEach(...)。

方法3：querySelectorAll()+forEach（最简洁） #

如果习惯用CSS选择器语法，querySelectorAll()返回的NodeList在现代浏览器里直接支持forEach，写起来超简洁：

document.querySelectorAll('.liHome').forEach(li => {
  li.classList.add('active');
  const targetA = li.querySelector('.aHome');
  if (targetA) {
    targetA.classList.add('active');
  }
});

这个写法代码量最少，适合在现代项目中使用。

总的来说，优先用classList.add()来处理类名添加，既避免重复又不用纠结空格问题；遍历方式可以根据你的兼容性需求来选~

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