I am facing Loop issue in DOM Manipulation, Can anyone look at it please?

I am trying to make rainbow text but I am unable to loop over, can anyone help?

This is the 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>```

AND THIS IS THE JAVASCRIPT

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

I want to loop colors over the span using document.querySelectorAll