使用getElementsByClassName设置innerText不生效该如何正确处理？

• document.getElementsByClassName('name') 返回的是包含所有匹配类名元素的HTMLCollection类数组集合，并非单个DOM节点，直接对集合设置innerText属性不会作用到内部元素上。
• document.querySelectorAll('span.name') 返回的是所有匹配选择器元素的NodeList类数组集合，同样属于多元素集合，直接赋值innerText也不会生效。
• 额外注意：全局作用域下不建议用name作为变量名，name是window对象的内置属性，赋值可能存在意外的类型转换问题。

遍历获取到的所有元素，逐个设置innerText即可，同时注意要保证JS执行时页面DOM已经渲染完成，避免找不到元素的问题。修改后的可运行代码如下：

JS代码 #

// 监听DOM加载完成后再执行逻辑，避免JS放在head中时找不到元素
document.addEventListener('DOMContentLoaded', () => {
  const userName = "Sam";
  // 遍历所有匹配的span元素，逐个赋值
  document.querySelectorAll("span.name").forEach(element => {
    element.innerText = userName;
  })
})

HTML代码 #

原有HTML代码无需修改：

<p> This is <span class="name"></span>.</p>
<p> <span class="name"></span> is my friend</p>
<p> <span class="name"></span> is ten years old.</p>
<p> <span class="name"></span> likes football.</p>

如果需要修改名字，只需要修改userName变量的值就能全局统一更新。

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