如何遍历span元素并按索引顺序为其分配颜色数组中的对应颜色

直接通过DOM选择器获取所有目标span元素，再用基础for循环按索引匹配颜色数组赋值即可，实现代码如下：

完整代码 #

JavaScript 代码 #

// 等待DOM加载完成后执行逻辑，避免元素未渲染获取失败
document.addEventListener('DOMContentLoaded', () => {
  const colors = ['red', 'orange', 'yellow', 'green'];
  // 选中h1标签下的所有span元素
  const spanList = document.querySelectorAll('h1 > span');
  // 基础for循环按索引遍历
  for (let i = 0; i < spanList.length; i++) {
    // 为当前span设置对应索引的颜色
    spanList[i].style.color = colors[i];
  }
})

现有HTML代码无需修改 #

<h1>
    <span>B</span>
    <span>E</span>
    <span>A</span>
    <span>R</span>
</h1>

效果说明 #

四个span元素的索引从0到3依次对应colors数组的四个值，最终会实现：

• 索引0的字符B显示红色
• 索引1的字符E显示橙色
• 索引2的字符A显示黄色
• 索引3的字符R显示绿色

如果后续span数量多于颜色数组长度，可将赋值逻辑改为spanList[i].style.color = colors[i % colors.length]，循环复用颜色数组即可。

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