首页 > 技术文章 > getElementByName()和getElementById的区别

zhwl0520 2016-12-04 20:29 原文

因为在属性中,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>

 

推荐阅读