get element by class, target all elements on page with class name
<p>i am trying to show different project stages within a pipeline. When the user hovers on each stage of the pipeline, the border color on the projects within that stage changes to highlight them. Pretty simple.</p>

<p>Well i cannot seem to target all of the items in the class on that page, it is only letting me target one using [0]. But i need it to get all the divs within that class, not just 1. Seems like an easy fix but i cannot seem to find anything regarding this.</p>

<pre><code>    &lt;script&gt;
function scanSHOW() {

    document.getElementsByClassName('scan-item')[0].style.border="2px #FF0000 solid";}

function scanHIDE() {   

document.getElementsByClassName('scan-item')[0].style.border="2px #666666 solid";}

    &lt;/script&gt;


&lt;style&gt;.scan-item {border: 2px #666666 solid;}&lt;/style&gt;
</code></pre>

<p>HTML:</p>

<pre><code>&lt;img id="pipes" src="pipeline.png" usemap="#pipeline" width="483" height="221"&gt;

&lt;map name="pipeline"&gt;
  &lt;area shape="rect" coords="1,69,66,221" href="#" onMouseOver="scanSHOW();" onMouseOut="scanHIDE();" alt="Scan" title="Scan"&gt;

&lt;/map&gt;

&lt;br/&gt;

&lt;div  class="scan-item block"&gt;&lt;/div&gt; &lt;div  class="scan-item block"&gt;&lt;/div&gt; &lt;div  class="scan-item block"&gt;&lt;/div&gt; &lt;div  class="scan-item block"&gt;&lt;/div&gt;
</code></pre>