JS用getElementsByClassName获取HTML元素的方法

这篇文章将为大家详细讲解有关JS用getElementsByClassName获取HTML元素的方法，文章内容质量较高，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于网站设计制作、成都网站建设、深州网络推广、小程序开发、深州网络营销、深州企业策划、深州品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供深州建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

GetElementsByClassName()是一个方法，可以获取为其设置目标类名称的所有HTML元素,本篇文章来给大家介绍关于GetElementsByClassName()方法的具体使用。

例如，HTML元素的类名如下

标题
文本
链接

它具有可以为多个HTML元素赋予相同类名的功能。

因此，通常在一个HTML文件中有许多相同的类名，使用getElementsByClassName()，我们可以使用任意类名提取所有HTML元素。

如何使用getElementsByClassName()

我们先来看一下基本的语法

通过使用字符串指定要提取到目标范围的类名来使用。

doccument.getElementsByClassName( 类名 );

可以通过将目标范围设置为document来指定整个HTML元素。

当然，也可以设置任意范围。（详情将在后面描述）

另请注意，返回值是一个非常类似于数组的HTML集合。

获取具有任意类名的所有元素的方法

首先假设有以下HTML。

标题1
文本1
标题2
文本2

有两个类名sample和test

例如，要获取具有类名“test”的所有HTML元素，可以按如下方式编写。

var result = document.getElementsByClassName('test');
console.log(result[0]);
console.log(result[1]);

执行结果

文本1
文本2

如果在参数中将“test”指定为字符串，则可以获取包含该类名的所有HTML元素的集合。

之后，如果使用类似下标的数组输出，则可以获得HTML元素，如执行结果。

指定多个类的方法

例如，以下HTML

标题1
文本1
标题2
文本2

在这个例子中，h2和h3要素被赋予了2个类名

即使在这种情况下，您也可以通过为参数提供多个类名来获取所有类。

var result = document.getElementsByClassName('sample test');
console.log(result[0]);
console.log(result[1]);

执行结果

标题1
标题2

GetElementsByClassName()的使用         

指定document以外的根元素的方法

我们看看以下HTML元素

标题1
文本1

    
标题2
    
文本2

在该示例中，使用div元素形成分层结构。

通过这样描述，例如可以仅以id属性值wrap内的HTML元素为对象。

指定元素范围搜索类的方法

如果像上面那样设置div元素的范围，请按如下所示进行编写。

var div = document.getElementById('wrap');
var result = div.getElementsByClassName('test sample');
console.log(result[0]);

执行结果

标题2

首先，准备getElementById()来获取div元素。

之后，以取得的div元素为对象来执行getElementsByClassName()。

从执行结果来看，只获得div元素内的h3元素。

以上就是JS用getElementsByClassName获取HTML元素的方法，看完之后是否有所收获呢？如果想了解更多相关内容，欢迎关注创新互联行业资讯，感谢各位的阅读。