getelementsbyclassname()是一个方法，可以获取为其设置目标类名称的所有html元素,本篇文章来给大家介绍关于getelementsbyclassname()方法的具体使用。
推荐手册：1.HTML5最新版参考手册2.JavaScript中文参考手册
例如，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
登录后复制登录后复制
在这个例子中，h1和h2要素被赋予了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元素内的h2元素。
相文章推荐：
1.getElementsByClassName()如何使用？总结getElementsByClassName()实例用法
相关视频推荐：
1.独孤九贱(1)_HTML5视频教程
2.JavaScript极速入门_玉女心经系列
以上就是如何使用getElementsByClassName()从类名中获取多个HTML元素的详细内容，更多请关注【创想鸟】其它相关文章！
