用getElementsByClassName()和getElementById（）来获取label标签中的值

最新推荐文章于 2024-01-19 16:55:13 发布

越幸运~

最新推荐文章于 2024-01-19 16:55:13 发布

阅读量4k

点赞数 5

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_44877577/article/details/109242234

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

getElementsByClassName()与getElementById（）区别与联系

区别：getElementsByClassName()获取的是class 里的值，class不具有唯一性，所以一般以数组的方式被获取，getElementById（）获取的是id的值，id 是具有唯一性的。
联系：都可以获取值

getElementById（）这个获取label标签中的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="zh-cn" />
    <title>getElementById</title>
</head>
<body>

   <label id="he">hello world--id</label>

<script type="text/javascript">
    var Label_content=document.getElementById('he').innerHTML;
    alert (Label_content)
</script>
</body>
</html>

在这里插入图片描述

getElementsByClassName()来获取label标签中的值 内联代码片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="zh-cn" />
    <title>getElementById</title>
</head>
<body>

<label class="she">hello world--class0</label>

<script type="text/javascript">
    var Label_content=document.getElementsByClassName('she')[0].innerHTML;
    alert (Label_content)
</script>
</body>
</html>

getElementsByClassName()

倘若还是不能理解为啥getElementsByClassName(‘she’)[0]，这个为啥要加[0]`，可以运行下面的代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="zh-cn" />
    <title>getElementById</title>
</head>
<body>

<label class="she">hello world--class0</label>
<label class="she">hello world--class1</label>
<label class="she">hello world--class2</label>
<label class="she">hello world--class3</label>
<label class="she">hello world--class4</label>


<script>
    var Label_content=document.getElementsByClassName('she')[0].innerHTML;
    var Label_content1=document.getElementsByClassName('she')[1].innerHTML;
    var Label_content2=document.getElementsByClassName('she')[2].innerHTML;
    var Label_content3=document.getElementsByClassName('she')[3].innerHTML;
    var Label_content4=document.getElementsByClassName('she')[4].innerHTML;
    alert (Label_content)
    alert (Label_content1)
    alert (Label_content2)
    alert (Label_content3)
    alert (Label_content4)
</script>
</body>
</html>

越幸运~

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
用getElementsByClassName()和getElementById（）来获取label标签中的值

getElementsByClassName()与getElementById（）区别与联系区别：getElementsByClassName()获取的是class 里的值，class不具有唯一性，所以一般以数组的方式被获取，getElementById（）获取的是id的值，id 是具有唯一性的。联系：都可以获取值getElementById（）这个获取label标签中的值<!DOCTYPE html><html><head> <meta c
复制链接

扫一扫