您的位置是:网站首页>Javascript编程Javascript编程

如何使用getElementsByClassName()从类名中获取多个HTML元素

少儿编程网2020-05-02 20:31:05Javascript编程 人已围观 来源:少儿编程 -用户投稿

简介GetElementsByClassName()是一个方法,可以获取为其设置目标类名称的所有HTML元素,本篇文章来给大家介绍关于GetElementsByClassName()方法的具体使用。推荐手册:1.HTML5最新版参考手册2.JavaScript中文参考手册例如,HTML元素的类名如下&l

GetElementsByClassName()是一个方法,可以获取为其设置目标类名称的所有HTML元素,本篇文章来给大家介绍关于GetElementsByClassName()方法的具体使用。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

推荐手册
1.HTML5**新版参考手册
2.JavaScript中文参考手册

例如,HTML元素的类名如下B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<h1 class="sample">标题</h1>
<p class="test">文本</p>
<a class="test" href="#">链接</a>

它具有可以为多个HTML元素赋予相同类名的功能。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

因此,通常在一个HTML文件中有许多相同的类名,使用getElementsByClassName(),我们可以使用任意类名提取所有HTML元素。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

如何使用getElementsByClassName()B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

我们先来看一下基本的语法B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

通过使用字符串指定要提取到目标范围的类名来使用。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

doccument.getElementsByClassName( 类名 );

可以通过将目标范围设置为document来指定整个HTML元素。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

当然,也可以设置任意范围。(详情将在后面描述)B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

另请注意,返回值是一个非常类似于数组的HTML集合。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

获取具有任意类名的所有元素的方法B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

首先假设有以下HTML。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<h1 class="sample">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample">标题2</h2>
<p class="test">文本2</p>

有两个类名sample和test
B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

例如,要获取具有类名“test”的所有HTML元素,可以按如下方式编写。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

执行结果
B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<p class="test">文本1</p>
<p class="test">文本2</p>

如果在参数中将“test”指定为字符串,则可以获取包含该类名的所有HTML元素的集合。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

之后,如果使用类似下标的数组输出,则可以获得HTML元素,如执行结果。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

指定多个类的方法B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

例如,以下HTMLB5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<h1 class="sample test">标题1</h1>
<p class="test">文本1</p>
<h2 class="sample test">标题2</h2>
<p class="test">文本2</p>

在这个例子中,h1和h2要素被赋予了2个类名B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

即使在这种情况下,您也可以通过为参数提供多个类名来获取所有类。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

执行结果B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<h1 class="sample test">标题1</h1>
<h2 class="sample test">标题2</h2>

GetElementsByClassName()的使用 B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

指定document以外的根元素的方法B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

我们看看以下HTML元素B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<h1 class="sample test">标题1</h1>
<p class="test">文本1</p>
<div id="wrap">
    <h2 class="sample test">标题2</h2>
    <p class="test">文本2</p>
</div>

在该示例中,使用div元素形成分层结构。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

通过这样描述,例如可以仅以id属性值wrap内的HTML元素为对象。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

指定元素范围搜索类的方法B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

如果像上面那样设置div元素的范围,请按如下所示进行编写。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

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

执行结果B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

<h2 class="sample test">标题2</h2>

首先,准备getElementById()来获取div元素。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

之后,以取得的div元素为对象来执行getElementsByClassName()。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

从执行结果来看,只获得div元素内的h2元素。B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

相文章推荐
1.getElementsByClassName()如何使用?总结getElementsByClassName()实例用法
相关视频推荐
1.独孤九贱(1)_HTML5视频教程
2.JavaScript极速入门_玉女心经系列

以上就是如何使用getElementsByClassName()从类名中获取多个HTML元素的详细内容,更多请关注少儿编程网其它相关文章! B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台

来源:php中文网B5x少儿编程网-Scratch_Python_教程_免费儿童编程学习平台


相关文章:

支持一下 ( )

如何使用getElementsByClassName()从类名中获取多个HTML元素

      匿名评论
    • 评论
    人参与,条评论
    如何使用getElementsByClassName()从类名中获取多个HTML元素

微信公众号

免费视频教程

先知道