js如何遍历表单所有控件

一、总结

一句话总结：

1、获取form表单里面的的所有元素：通过formelement.elements，这里form元素通过name属性直接定位

var fele=form01.elements;

2、循环遍历获取特定的元素：通过elements[i]的形式

var e=fele[i];

前两步即可遍历表单所有控件

3、判断一个控件的类型是不是type：通过element.type

if (e.type=='submit') {

二、js如何遍历表单所有控件

1、案例截图

2、案例代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <style type="text/css">
 7     /*    input{background: green}
 8         input[type=submit]{
 9             background: orange
10         }*/
11     </style>
12 </head>
13 <body>
14     <form action="#" method="post" name="form01">
15         <p>昵称：<input type="text" name="username"></p>
16         <p>密码：<input type="password" name="password"></p>
17         <p><input type="submit" value="提交"></p>
18     </form>
19     <script type="text/javascript">
20         function getFele(){
21             var fele=form01.elements;
22             // alert(fele.length)
23             for(var i=0;i<fele.length;i++){
24                 var e=fele[i];
25                 if (e.type=='submit') {
26                     e.style.background='orange'
27                 }else{
28                     e.style.background='green'
29                 }
30                 
31             }
32 
33         }
34         getFele()
35     </script>
36 </body>
37 </html>