为什么调用document.getElementsByClassName后设置innerHTML不生效？

问题原因 #

document.getElementsByClassName() 方法返回的是包含所有匹配类名元素的HTMLCollection类数组集合，不是单个DOM元素对象，直接对整个集合赋值innerHTML属性不会生效，因为集合本身没有这个属性，只有集合内的单个DOM元素才支持innerHTML操作。

解决方法 #

根据你的使用场景可以选择以下任意一种方案：

• 如果你确定页面中只有一个class="specs"的元素，直接取集合的第一个元素操作即可：

document.getElementsByClassName("specs")[0].innerHTML = "<p>Lorem ipsum</p>";

• 更推荐使用querySelector直接获取单个匹配元素，写法更简洁：

document.querySelector(".specs").innerHTML = "<p>Lorem ipsum</p>";

• 如果你需要批量修改所有class="specs"的元素内容，遍历集合依次操作即可：

const specsList = document.getElementsByClassName("specs");
for(let i = 0; i < specsList.length; i++) {
  specsList[i].innerHTML = "<p>Lorem ipsum</p>";
}

额外注意事项 #

如果修改后还是不生效，需要检查JS代码的执行时机：如果JS代码放在<head>标签内，执行时页面DOM还没完成渲染，会找不到对应元素，你可以把JS代码移到</body>标签之前，或者把代码包裹在DOMContentLoaded监听事件中：

document.addEventListener('DOMContentLoaded', function() {
  // 把操作DOM的代码放在这里
  document.querySelector(".specs").innerHTML = "<p>Lorem ipsum</p>";
});

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