javascript - 按类获取元素，以类名定位页面上的所有元素

Question

我正在尝试展示管道中的不同元素阶段。当用户将鼠标悬停在管道的每个阶段时，该阶段内元素的边框颜色会更改以突出显示它们。很简单。

好吧，我似乎无法定位该页面上类(class)中的所有元素，它只能让我使用 [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";
}