首页 > 代码库 > js之操作dom对象的属性

js之操作dom对象的属性

JS操作表单对象的属性:

<script type="text/javascript">
        
        function testform01(){
        //0
        //    var frm = document.forms[0];
        //1
        //    var frm = document.forms["form01"];
        //    alert(frm.name);
        //    alert(frm.action);
        //    alert(frm.method);
        //    alert(frm.enctype);
        
        //2
            //var forms = document.getElementsByName("form01");
            //var frm = forms[1];
            //alert(frm.name);
            //alert(frm.action);
            //alert(frm.method);
            //alert(frm.enctype);
            
        //3    
            //var forms = document.getElementById("form01");
        //    alert(forms.length);
        //    alert(forms.name);
        //    alert(forms.action);
        //    alert(forms.method);
        //    alert(forms.enctype);
        
        //4
        //    var forms = document.getElementsByTagName("form");
        //    alert(forms.length);
        //    var frm = forms[1];
        //    alert(frm.name);
        //    alert(frm.action);
        //    alert(frm.method);
        //    alert(frm.enctype);
        
        //5
            var frm = document.form02;
            alert(frm.name);
            alert(frm.id);
            alert(frm.action);
            alert(frm.method);
            alert(frm.enctype);
        }
        
        //6、
            function test02(){
                var fr02 = document.form02;
                //alert(fr02.elements.length); //==4
                alert(fr02.length); //==4
                alert(fr02.elements[3].value); //注册2
                //fr02.reset();   
                //fr02.submit();
            }
    </script>

上述7中方法可以获得表单对象,进而操作锁定应表单的属性

<body>
        <form name="form01" id="form01" action="test11" method="post" enctype="" onsubmit="return test03();" onreset="return test04();">
            <!-- 文件上传必须post -->
        姓名:<input  type="text" name="uname" /><br>
        密码:<input type="password" name="pwd" /><br>
        密码确认:<input type="password" id="repwd"/><br>
        <input type="submit" value="http://www.mamicode.com/注册1"/>
        </form>
        
        <form name="form02" id="form02" action="test22" method="get" enctype="">
        姓名:<input  type="text" name="uname" id="uname2"/><br>
        密码:<input type="password" name="pwd" id="pwd1" /><br>
        密码确认:<input type="password" id="repwd2" name="repwd"/><br>
        <input type="reset" value="http://www.mamicode.com/重置2" />
        <input type="submit" value="http://www.mamicode.com/注册2"/>
        </form>
        <input type="button" value="http://www.mamicode.com/测试01" onclick="testform01()" />
        <input type="button" value="http://www.mamicode.com/测试02" onclick="test02()" />
    </body>


form对象的事件:

    onsubmit 表单提交之前触发

    onreset    表单重置之前触发

        function test03(){
            alert("test"); //模拟验证
            return false;  //验证阻塞
        }
        function test04(){
            alert("reset");
            return false;
        }

    

js之操作dom对象的属性