получить элемент по классу, указать все элементы на странице с именем класса

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"; 
}