JavaScript 遍历 from 表单所有控件

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

DOCTYPE html>



演示文档

/*    input{background: green}
    input[type=submit]{
        background: orange
    }*/





    昵称：
    密码：
    



function getFele(){
    var fele=form01.elements;
    // alert(fele.length)
    for(var i=0;iDOCTYPE html>


    
    演示文档
    
        form{
            width: 300px;
            height: 150px;
            background: green;
            margin:25px;
        }
    



表单1
表单2
表单3
表单4


//访问表单的的方式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'

源码解析

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'