クラスで要素を取得する、クラス名でページ上のすべての要素をターゲットにする

Question

パイプライン内で異なるプロジェクトステージを表示しようとしています。ユーザーがパイプラインの各ステージを移動すると、そのステージ内のプロジェクトの境界線の色が変更され、強調表示されます。ものすごく単純。

私はそのページのクラス内のすべてのアイテムをターゲットにすることはできません。[0]を使用してターゲットにすることしかできません。しかし、私はそのクラス内のすべてのdivを取得する必要があるだけでなく、1。簡単な修正のようだが、私はこれについて何かを見つけることができないようだ。

<script> 
function scanSHOW() { 

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

function scanHIDE() { 

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

    </script> 


<style>.scan-item {border: 2px #666666 solid;}</style> 

HTML：

<img id="pipes" src="pipeline.png" usemap="#pipeline" width="483" height="221"> 

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

</map> 

<br/> 

<div class="scan-item block"></div> <div class="scan-item block"></div> <div class="scan-item block"></div> <div class="scan-item block"></div> 

Answer 1

これは、ループがために何であるかを正確です。単純なforループは、各要素を順番に循環するので、そのトリックを行います。何かのように：

var elements = document.getElementsByClassName('scan-item'); 
for (var i = 0; i < elements.length; i++) { 
    elements[i].style.border="2px #FF0000 solid"; 
}