如何在JavaScript中修改相同元素文本及替换li内容为序号

1. 如何在JavaScript中修改一组相同元素的文本内容？ #

要批量修改相同元素的文本内容，核心逻辑分两步：

• 先通过getElementsByTagName、querySelectorAll等方法获取目标元素的集合
• 遍历这个集合，对每个元素单独修改textContent（优先用这个，避免HTML注入风险）或innerHTML

2. 将id为ul的<ul>下所有<li>内容替换为对应序号 #

先指出你提供的原代码存在的问题：

• 直接给document.getElementsByTagName("li").innerHTML赋值只会修改第一个li元素，因为返回的是元素集合而非单个元素
• element.getElementsByTagName('*').length会获取ul下所有子元素（包括嵌套的其他标签），如果ul下只有li，应该直接获取li集合的长度

以下是修正后的实现：

HTML代码 #

<ul id="ul">
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
  <li>X</li>
</ul>

JavaScript代码 #

// 获取目标ul元素
const ulElement = document.getElementById("ul");
// 获取当前ul下的所有li元素集合
const liItems = ulElement.getElementsByTagName("li");

// 遍历li集合，逐个替换为对应序号
for (let i = 0; i < liItems.length; i++) {
  // 序号从1开始，所以用i+1
  liItems[i].textContent = i + 1;
}

代码说明 #

1. 先通过getElementById精准定位目标ul，避免全局查找的干扰
2. 直接从该ul下获取li元素，确保只修改目标列表内的项
3. 用textContent设置纯文本内容，比innerHTML更安全高效

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