JavaScript getElementsByClassName()

JavaScript getElementsByClassName()

getElementsByClassName()方法用于通过类名值选择或获取元素。这个DOM方法返回一个类似数组的对象,其中包含所有具有指定classname的元素。在对特定元素调用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>

输出:

JavaScript getElementsByClassName()

同样地,我们可以实现 getElementsByClassName() 方法以返回多个类的元素集合。

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

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

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

理解的关键是,上述所有方法都返回一个元素或列表,但是 getELementsByClassName() 方法用于 动态 更新,而其他两个方法用于 静态 更新。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程