getElementByName()和getElementById的区别

最新推荐文章于 2018-10-31 17:44:00 发布

weixin_30840573

最新推荐文章于 2018-10-31 17:44:00 发布

阅读量427

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhwl0520/p/6131757.html

本文通过实例演示了如何使用document.getElementsByName()与document.getElementById()方法获取HTML元素，并解释了两者的区别：前者返回相同name属性的元素集合，后者返回指定id的单一元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为在属性中，id时唯一的，getElementById取出的是一个元素
但是可以出现相同的name，取到的是一个Array ，getElementsByName取出的是数组

记录代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>区分ByName和ById</title>
 6     <style type="text/css">
 7     body {
 8         text-align: center;
 9         margin-left: auto;
10         margin-right: auto;
11     }
12     </style>
13 </head>
14 <body>
15     <b>1.通过document.getElementByName()来取值</b><br/>
16     年龄：
17     <input type="text" name="age1" />
18     <br/>
19     检测：
20 <input type="button"  onClick="myByName()" value="点我"/>
21 <script>
22             function myByName(){
23                 var age1=document.getElementsByName("age1")[0].value;
24                 alert(age1);
25                 if(age1<=18){
26                     alert("小于18岁");
27                 }else{
28                     alert("年龄大于18岁了");
29                 }
30             }
31 
32             function myById(){
33                 var age=document.getElementById("age").value;
34                         alert(age);
35                 if(age<=18){
36                     alert("小于18岁");
37                 }
38                 else{
39                     alert("年龄大于18岁了");
40                 }
41             }
42 </script> 
43     <br/>
44     <b>2.通过document.getElementById()来取值</b><br/>
45     年龄：
46     <input id="age" type="text" />
47     <br/>
48     检测：
49     <input type="button" onclick="myById()" value="点我"/>
50     <br/>
51 </body>
52 </html>