使用JavaScript遍历HTML div修改innerHTML仅首个元素生效如何解决？

• HTML规范要求id属性全局唯一，同一页面内不能出现多个相同id的元素。document.getElementById()方法永远只会返回整个文档中第一个匹配对应id的元素，因此即使循环执行多次，每次修改的都是第一个匹配到的p标签。
• 代码逻辑存在缺陷：你已经遍历获取到了页面所有div元素的集合，但循环体内没有使用当前遍历到的div元素，每次都是全局查找id为header的元素，完全没有用到遍历的结果。

推荐先修正HTML不规范写法，将重复的id替换为class，符合前端标准写法如下：
修改HTML中p标签的属性：

<!-- 把重复的id="header"替换为class="header" -->
<div>
    <p class="header">November 29th</p>
</div>
<div>
    <p class="header">November 29th</p>
</div>
<div>
    <p class="header">November 29th</p>
</div>

对应的JS代码：

// 选中所有div下class为header的p元素
const headerParagraphs = document.querySelectorAll('div p.header')
// 遍历修改内容
headerParagraphs.forEach(para => {
  para.innerHTML = 'Hello World!'
})

如果暂时不需要修改现有HTML结构，也可以通过遍历div后查找当前div内的p元素实现（不推荐该方式，不符合id唯一的规范）：

const divList = document.getElementsByTagName('div')
for (let i = 0; i < divList.length; i++) {
  // 仅在当前遍历到的div内部查找p元素
  const currentP = divList[i].querySelector('p')
  if (currentP) {
    currentP.innerHTML = 'Hello World!'
  }
}

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