js form对象的三种获取方式

js form对象的三种获取方式

 

 

[javascript] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <script>  
  7.         function test(){  
  8.        //     var form1=document.getElementById("formId");//[object HTMLFormElement]  
  9.   
  10.        //     var form1=document.getElementsByName("form1")[0];//[object HTMLFormElement]  
  11.   
  12.         //   var form1=document.getElementsByTagName("form")[0];//[object HTMLFormElement]  
  13.   
  14.             var forms=document.forms;//[object HTMLCollection]  
  15.   
  16.             //form对象的 第一种获取方式  
  17.             var form1=document.forms[0];  
  18.            for(var i =0 ;i<forms.length;i++){  
  19.                 alert(forms[i].name);  
  20.            }  
  21.             //form对象的 第二种获取方式  
  22. //            var form1=document.forms["form1"];  
  23.             //form对象的 第三种获取方式  
  24.      //       var form1=document.form1;  
  25. //            alert(form1.elements.length);  
  26. //            alert(form1.length);  
  27.   
  28.         }  
  29.   
  30.     </script>  
  31. </head>  
  32. <body>  
  33.     <form name="form1" id="formId" action="test.html" method="get">  
  34.         用户名:<input name="uname"  /><br/>  
  35.         密码:<input type="password" name="pwd"/><br/>  
  36.         <input type="submit" value="提交" />  
  37.     </form>  
  38.     <form name="form2" id="formId2" action="test.html" method="get">  
  39.         用户名:<input name="uname"  /><br/>  
  40.         密码:<input type="password" name="pwd"/><br/>  
  41.         <input type="submit" value="提交" />  
  42.     </form>  
  43.     <input type="button" value="test" onclick="test()" />  
  44. </body>  
  45. </html>  


 

 
 
posted @ 2017-01-11 11:48  天涯海角路  阅读(189)  评论(0)    收藏  举报