title: Change or swap the CSS of multiple HTML elements at once
body: <p>I have about 100 <code>&lt;span class="foo"&gt;</code>, 100 <code>&lt;span class="bar"&gt;</code> and 100 <code>&lt;span class="baz"&gt;</code> tags in my document. I need to implement the following operations in JavaScript:</p>
  
  <ul>
  <li>Change the background all foos to red, all bars to green, all bazes to blue.</li>
  <li>Change the background all foos to green, all bars to blue, all bazes to red.</li>
  <li>Change the background all foos to blue, all bars to red, all bazes to green.</li>
  </ul>
  
  <p>I will call these operations about 1000 times altogether, so I'd like to avoid a solution which appends a <code>&lt;style&gt;</code> tag to the <code>&lt;head&gt;</code> each time I do an operation.</p>
  
  <p>Is there something simpler or faster or better than iterating over all <code>&lt;span&gt;</code> elements with <code>document.getElementsByTagName('span')</code>, and changing or appending to the <code>.className</code> DOM properties for each element?</p>