title: Set different font color based on array for all spans in a document?
body: <p>Using JavaScript I would like to change the style of each <code>&lt;span&gt;</code> from an array of colors. Here is an example:</p>
  <p>HTML:</p>
  <pre><code>        &lt;span&gt;H&lt;/span&gt;
          &lt;span&gt;E&lt;/span&gt;
          &lt;span&gt;L&lt;/span&gt;
          &lt;span&gt;L&lt;/span&gt;
          &lt;span&gt;O&lt;/span&gt;
  </code></pre>
  <p>JS:</p>
  <pre><code>colors=['red', 'orange', 'yellow', 'blue','green'];
  [...document.querySelectorAll('span')].map( sp =&gt; {
           sp.style.color = colors[0];
           colors.shift();
  });
  </code></pre>
  <p>Now my current thought is to spread my selection and use <code>map</code> so that I can iterate through each object. At the moment I am deleting elements in the colors as they are being used. I could also create an iterator to keep track of the colors so they do not get deleted. Assuming the number of objects and number of colors are the same I could also just step through with a for loop and set colors.</p>
  <p>How can I accomplish this?</p>