📅 最后修改于: 2023-12-03 15:15:15.327000 🧑 作者: Mango
JavaScript中的getElementsByClassName()方法允许您使用类名选择页面元素，并在DOM文档树中返回一个HTML集合。这些元素拥有指定类名。
getElementsByClassName()的基本用法如下：
document.getElementsByClassName(classname);
例如，我们可以使用如下代码获取所有类名为"example"的元素：
var elements = document.getElementsByClassName("example");
这将返回一个带有类名"example"的HTMLCollection对象。它类似于数组，因此您可以使用像下面这样的循环遍历其各个元素：
for (var i = 0; i < elements.length; i++) {
// Do something with elements[i]
}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript getElementsByClassName() Example</title>
</head>
<body>
<h1 class="example">This is an example heading</h1>
<p class="example">This is an example paragraph</p>
<ul>
<li class="example">List item</li>
<li>List item</li>
<li class="example">List item</li>
</ul>
<script>
var elements = document.getElementsByClassName("example");
for (var i = 0; i < elements.length; i++) {
elements[i].style.color = "red";
}
</script>
</body>
</html>
在这个例子中，我们选择了所有类名为"example"的元素，并将它们的颜色设置为红色。
getElementsByClassName()是一个非常有用的方法，可以让您更轻松地选择和处理页面元素。 请记住，在更广泛的浏览器支持情况下使用它，特别是在旧版的Internet Explorer中。