我在 DOM 操作中遇到循环问题，有人可以看看吗？答案

【问题标题】：I am facing Loop issue in DOM Manipulation, Can anyone look at it please?我在 DOM 操作中遇到循环问题，有人可以看看吗？
【发布时间】：2022-02-07 09:32:01
【问题描述】：

我正在尝试制作彩虹文字，但无法循环播放，有人可以帮忙吗？

这是 HTML

<body>
    <h1>
        <span>R</span>
        <span>A</span>
        <span>I</span>
        <span>N</span>
        <span>B</span>
        <span>O</span>
        <span>W</span>
    </h1>
</body>```

这是javascript

const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']

我想使用document.querySelectorAll在跨度上循环颜色

【问题讨论】：

标签： javascript html dom

【解决方案1】：

我不完全确定您希望在这里完成什么。我认为您想用颜色数组中的元素顺序为各个字母着色。

您可以通过几种不同的方式做到这一点。更直接的解决方案之一是使用 forEach 方法在（类似数组的）节点列表上执行回调函数。

这样的……

将您的 span 收集到一个节点列表中（使用 querySelectorAll）
迭代该节点列表的成员（传入成员变量和索引属性）
在回调函数中指定内联样式（颜色数组中索引对应的颜色）。

或者，您可以添加一个类，也可能添加其他东西。

祝你好运。

const letters = document.querySelectorAll('.letters span');
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];

letters.forEach((letter, index) => {
  letter.style.color = colors[index]
})

<body>
  <h1 class="letters">
    <span>R</span>
    <span>A</span>
    <span>I</span>
    <span>N</span>
    <span>B</span>
    <span>O</span>
    <span>W</span>
  </h1>
</body>

【讨论】：