如何使用JS修改span文本？使用getElementsByTagName()失败求排查

给你列几个最常见的坑，对照着排查：

• 忽略了它返回的是集合而非单个元素
  getElementsByTagName()返回的是HTMLCollection类数组对象，哪怕页面里只有一个对应标签，也得通过索引定位到具体元素才能修改内容。比如：

  // 遍历所有p标签修改文本
  const paras = document.getElementsByTagName('p');
  for (let i = 0; i < paras.length; i++) {
    paras[i].textContent = '新的文本内容';
  }
  // 只修改第一个p标签
  document.getElementsByTagName('p')[0].textContent = '第一个p标签的新文本';
  

• 代码执行时机过早，DOM未加载完成
  如果你的JS代码写在<head>标签内，或者目标元素的HTML代码之前，执行时浏览器还没解析到对应标签，自然获取不到元素。解决办法：

  • 把JS代码放到</body>标签前（页面最底部）
  • 用DOM加载完成事件包裹代码：

    document.addEventListener('DOMContentLoaded', function() {
      // 这里写获取元素和修改文本的逻辑
    });
    

• 修改文本的方法用错了
  要修改纯文本内容，优先用textContent（仅修改文本，不会解析HTML）；如果需要插入带HTML结构的内容，再用innerHTML。别混淆成其他属性。

如果还有特殊场景，把你的具体代码贴出来能更快定位问题。

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