JavaScript 遍历 from 表单所有控件

浅浅的花香味﹌ 2023-10-06 22:23 15阅读 0赞

#### 阅读目录 ####

*  JavaScript 遍历 from 表单所有控件 源码
 *   *  源码解析
 *  JavaScript 访问表单（四种方法）
 *   *  源码解析

## JavaScript 遍历 from 表单所有控件 源码 ##

![在这里插入图片描述][580d2ef24ab54730a5341994e444e147.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>演示文档</title>
    <style type="text/css">
    /*    input{background: green}
        input[type=submit]{
            background: orange
        }*/
    </style>
    </head>
    <body>
    
    <form action="#" method="post" name="form01">
        <p>昵称：<input type="text" name="username"></p>
        <p>密码：<input type="password" name="password"></p>
        <p><input type="submit" value="提交"></p>
    </form>
    
    <script type="text/javascript">
    function getFele(){
          
        var fele=form01.elements;
        // alert(fele.length)
        for(var i=0;i<fele.length;i++){
          
            var e=fele[i];
            if (e.type=='submit') {
          
                e.style.background='orange'
            }else if(e.type=='password'){
          
                e.style.background='rgb(232, 240, 254)'
            }else{
          
                e.style.background='green'
            }
        }
    }
    
    getFele()
    </script>
    
    </body>
    </html>

### 源码解析 ###

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') {
        }

## JavaScript 访问表单（四种方法） ##

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_8_color_FFFFFF_t_70_g_se_x_16]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>演示文档</title>
        <style type="text/css">
            form{
          
                width: 300px;
                height: 150px;
                background: green;
                margin:25px;
            }
        </style>
    </head>
    <body>
    
    <form action="" name="myform1">表单1</form>
    <form action="" name="myform2">表单2</form>
    <form action="" name="myform3">表单3</form>
    <form action="" name="myform4">表单4</form>
    
    <script type="text/javascript">
    //访问表单的的方式1
    document.getElementsByTagName('form')[0].style.background='red';
    
    //访问表单的的方式2
    // alert(document.forms.length)
    document.forms[1].style.background='orange';
    
    //访问表单的的方式3
    document.forms['myform3'].style.background='blue';
    
    //访问表单的的方式4
    //不推荐使用，因为页面中表单较多的情况下容易出现相同name
    myform4.style.background='pink'
    
    </script>
    </body>
    </html>

### 源码解析 ###

1、访问表单的的方式1：document 的 getElement 方式

document.getElementsByTagName('form')[0].style.background='red';

2、访问表单的的方式2：document 的 forms 属性

// alert(document.forms.length)
    document.forms[1].style.background='orange';

3、访问表单的的方式3：documen t的 forms 属性加 form 的 name 属性精确定位

document.forms['myform3'].style.background='blue';

4、访问表单的的方式4：form 的 name 属性精确定位

//不推荐使用，因为页面中表单较多的情况下容易出现相同 name
    myform4.style.background='pink'

[580d2ef24ab54730a5341994e444e147.png]: https://img-blog.csdnimg.cn/580d2ef24ab54730a5341994e444e147.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_8_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/de14d4adb06348999492b891caf3bacf.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_8,color_FFFFFF,t_70,g_se,x_16