JS getElementsByClassName()方法，通过类查找元素

getElementsByClassName()方法

JavaScript中的document的对象的getElementsByClassName()方法可以通过HTML元素的类class属性名来查找获取元素，因为HTML中的元素的类名可以设置成同一个名称，并不是唯一的，因此通过JS通过类来查找元素可以获取同时获取多个。

提示：getElementsByClassName()中的“Elements”为复数形式。

语法

document.getElementsByClassName( className )

参数

参数	描述
className	JavaScript的字符串类型值，为HTML元素的类名称

返回值

指定类属性值的元素集合，可以通过索引的方式来访问集合中的元素。

getElementsByClassName()实例代码，及在线编辑器

实例中，通过for循环来逐一对getElementsByClassName()查找到的元素集合中的各个元素设置文本颜色：

<p class='c1'>段落一</p>
<p class='c1'>段落二</p>
<div class='c1'>div元素</div>
<span class='c1'>span元素</span>
<br>
<h5 class='c1'>h5元素</h5>
<button onclick='setColor()'>改变字体颜色</button>

<script>
  function setColor(){
    
   var elements = document.getElementsByClassName("c1");
    for(e in elements){
      elements[e].style.color='skyblue';
    }
  }
</script>

hot：热门