如何基于类名多次使用innerHTML插入内容？当前仅生效一次

嘿，我完全懂你的困扰——你现在的代码里用getElementsByClassName()[0]只能修改第一个匹配到的元素，后面相同类名的元素都没变化对吧？这事儿原因很简单：你每次只选中了类集合里的第一个元素（下标[0]），自然只会生效一次啦。

问题根源 #

document.getElementsByClassName()返回的是一个HTMLCollection（动态元素集合），它包含了页面上所有匹配该类名的元素。但你加了[0]，就相当于只挑了集合里的第一个元素来操作，剩下的元素根本没被触及到。

解决方案：遍历所有匹配元素 #

要让所有对应类名的元素都生效，你需要遍历整个元素集合，给每个元素都设置内容。这里有几种好用的方法：

方法1：用for循环遍历HTMLCollection

这是兼容性最好的写法，适合所有浏览器：

window.onload = function(){ 
  // 处理所有类名为"0"的元素
  const elements0 = document.getElementsByClassName("0");
  for(let i = 0; i < elements0.length; i++){
    elements0[i].innerHTML = `text0`;
  }
  // 类名"1"同理
  const elements1 = document.getElementsByClassName("1");
  for(let i = 0; i < elements1.length; i++){
    elements1[i].innerHTML = `text1`;
  }
  // 类名"2"
  const elements2 = document.getElementsByClassName("2");
  for(let i = 0; i < elements2.length; i++){
    elements2[i].innerHTML = `text2`;
  }
  // 类名"3"
  const elements3 = document.getElementsByClassName("3");
  for(let i = 0; i < elements3.length; i++){
    elements3[i].innerHTML = `text3`;
  }
}

方法2：用querySelectorAll() + forEach（更简洁）

querySelectorAll()返回静态的NodeList，现代浏览器都支持直接用forEach遍历，代码会清爽很多：

window.onload = function(){ 
  // 遍历所有类名含"0"的元素
  document.querySelectorAll(".0").forEach(el => {
    el.innerHTML = `text0`;
  });
  // 类名"1"
  document.querySelectorAll(".1").forEach(el => {
    el.innerHTML = `text1`;
  });
  // 类名"2"
  document.querySelectorAll(".2").forEach(el => {
    el.innerHTML = `text2`;
  });
  // 类名"3"
  document.querySelectorAll(".3").forEach(el => {
    el.innerHTML = `text3`;
  });
}

方法3：封装函数减少冗余代码

如果要处理的类名和内容很多，把逻辑封装成函数能大幅减少重复代码：

window.onload = function(){ 
  // 封装通用函数：根据类名设置内容
  function setTextByClass(className, text){
    document.querySelectorAll(`.${className}`).forEach(el => {
      el.innerHTML = text;
    });
  }
  // 批量调用函数处理
  setTextByClass("0", "text0");
  setTextByClass("1", "text1");
  setTextByClass("2", "text2");
  setTextByClass("3", "text3");
}

小提示 #

如果需要兼容非常老旧的浏览器（比如IE11），NodeList的forEach可能不支持，这时候可以把它转成数组再遍历：

Array.from(document.querySelectorAll(".0")).forEach(el => {
  el.innerHTML = `text0`;
});

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