JS循环创建4个h1时为何仅第一个h1的绿色颜色样式生效？

document.querySelector("h1") 的匹配规则是返回DOM中第一个匹配选择器的元素。你在每次循环里调用这个方法时，拿到的永远是第一次循环插入到页面的第一个h1节点，后续新创建的3个h1从来没有被选中过，自然不会应用绿色样式。

方案1：直接操作当前创建的节点（推荐，性能最优） #

你在循环里已经把新创建的h1存在tag变量里了，不需要再额外调用查询方法去DOM里找元素，直接给tag设置样式即可：

for (let i = 1; i <= 4; i++) {
  const tag = document.createElement("h1");
  const text = document.createTextNode(i + " Tutorix is the best e-learning platform");
  tag.appendChild(text);
  // 直接给当前创建的h1设置样式
  tag.style.color = "green";
  const container = document.getElementById("new");
  container.appendChild(tag);
}

对应的HTML结构不需要改动：

<div id="new">

</div>

方案2：批量查询所有h1后统一设置 #

如果需要等所有元素都插入DOM后再统一样式，可以用document.querySelectorAll("h1")获取页面中所有h1的节点集合，遍历集合逐个设置样式：

// 先完成所有h1的创建和插入
for (let i = 1; i <= 4; i++) {
  const tag = document.createElement("h1");
  const text = document.createTextNode(i + " Tutorix is the best e-learning platform");
  tag.appendChild(text);
  const container = document.getElementById("new");
  container.appendChild(tag);
}
// 批量选中所有h1设置样式
document.querySelectorAll("h1").forEach(h1 => {
  h1.style.color = "green";
})

更优的样式管理实践是提前定义CSS类，给元素加类名而非写内联样式，后续维护修改更方便：

.title-green {
  color: green;
}

创建元素时直接加类即可：tag.classList.add('title-green')

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