The getElementsByClassName() 方法用于通过元素的类名值选择或获取元素。这个 DOM 方法返回一个类似数组的对象,其中包含所有具有指定类名的元素。在调用 getElementsByClassName() 方法时,它会在整个文档中搜索并返回与指定类名匹配的元素。

语法

var elements = document.getElementsByClassName('name');

这里,name 是必需的参数。它是一个字符串,用于指定要匹配的单个类名或多个类名。

getElementsByClassName() 方法示例

让我们来看一些示例,了解该方法的实际应用。

示例:

这是一个简单的类实现,当调用变量 x 时,它返回一个类似数组的对象。

<html>
<head><h5>DOM Methods</h5></head>
<body>
<div class="Class">
  This is a simple class implementation
</div>
<script type="text/javascript">
  var x = document.getElementsByClassName('Class');
  document.write("On calling x, it will return an array-like object: <br>" + x);
</script>
</body>
</html>

输出:

1.png

类似地,我们可以使用 getElementsByClassName() 方法返回多个类的元素集合。

getElementsByClassName()querySelector()querySelectorAll() 方法之间的区别

getElementsByClassName() 它匹配具有指定类名的元素,并返回一组匹配的元素。返回的元素是一个实时的 HTML 集合。如果在文档对象模型中进行任何更改,这些实时元素将会进一步更新。

querySelector() 它返回与指定类名匹配的单个元素。如果没有找到任何匹配的元素,它将返回 null

需要理解的主要观点是,所有上述描述的方法都返回一个元素或列表,但 getElementsByClassName() 方法用于动态更新,而其他两个方法用于静态更新。

标签: js, JavaScript, JavaScript语言, JavaScript开发, JavaScript语法, JavaScript脚本, JavaScript教程, JavaScript入门, JavaScript入门教程, JavaScript进阶, JavaScript宝典, JavaScript学习, JavaScript指南, JavaScript大全