无涯教程网

JavaScript - GetElementsByClassName

getElementsByClassName()方法用于通过元素的类名值选择或获取元素。此DOM方法返回一个类似数组的对象，该对象由具有指定类名的所有元素组成。在对任何特定元素调用getElementsByClassName()方法时，它将搜索整个文档，并将仅返回与指定或给定类名匹配的那些元素。

var ele=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 arrsy-like object: <br>"+x);
</script>
</body>
</html>

输出:

GetElementsByClassName()

同样，可以实现getElementsByClassName()方法来返回多个类的元素集合。

链接：https://www.learnfk.comhttps://www.learnfk.com/javascript/javascript-getelementsbyclassname.html

来源：LearnFk无涯教程网

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

getElementsByClassName() - 它将与具有指定类名的元素匹配，并返回一组匹配的元素。

querySelector() - 它仅返回与指定类名匹配的单个元素。如果找不到任何匹配的元素，则返回null。

querySelectorAll() - 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

要理解的要点是，所有上述方法都返回一个元素或一个列表，但是getELementsByClassName()方法用于 dynamic 更新，而其他两种方法用于静态。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Flink核心技术与实战 -〔张利兵〕

超级访谈：对话毕玄 -〔毕玄〕

AI高手秘籍 -〔BBBMeta赵建涛〕

爱因斯冬 -〔爱因斯冬〕

我做外贸的那几年 -〔Nina〕

板沙的Nina -〔Nina〕

零基础低门槛AI生财项目 -〔Yuan〕

玩转AI短视频指南 -〔Solin〕

一人公司 -〔门冬冬〕

好记忆不如烂笔头。留下您的足迹吧 :)