JS document form表單元素操作完整示例

更新時間：2020年01月13日 10:23:32 作者：qq_42412646

這篇文章主要介紹了JS document form表單元素操作,結合完整實例形式詳細分析了JavaScript form表單元素獲取、輸出、遍歷等相關操作技巧,需要的朋友可以參考下

本文實例講述了JS document form表單元素操作。分享給大家供大家參考，具體如下：

<html>
    <head>
        <title>form表單操作</title>
        <meta charset="UTF-8"/>
        <script type="text/javascript">
            function testForm(){
//                獲取form對象  方法一,通過id,比較普遍的方法
                var fm=document.getElementById("fm");
                alert(fm);    //輸出fm的類型[object HTMLFormElement]
                alert(fm.length);  //輸出所用的表單項(表單類型參考Lgin.html)輸出值為8
//                獲取form對象   方法二，通過name,算是一個特殊的的方法
           var frm=document.frm;
           alert(frm);
                alert(frm.length);
                alert(fm===frm);   //返回值為true,其無論是類型還是內(nèi)容都是一樣的，其本來就是同一個對象
            }
            function testOper(){
                var fm=document.getElementById("fm");
//                輸出表單的元素
//                alert(fm.elements);   //顯示表單元素的類型[object HTMLFormControlsCollection]
//                alert(fm.elements.length);  //顯示表單元素的個數(shù)
//                利用表單的action屬性進行訪問地址的動態(tài)改變
                fm.action="http://www.baidu.com";
                alert(fm.action);       //返回了action的值
//                利用表單的submit屬性使普通的按鈕也具有提交功能
//                fm.submit();    //可以直接訪問修改后的網(wǎng)址
//                alert(fm.submit());   //執(zhí)行了submit操作并且返回了undefined
            }
            function testCheck(){
//                獲取checkbox的對象
                var fav=document.getElementsByName("fav");//通過Id無法獲取，但是通過Name
//                實現(xiàn)選中遍歷打印操作
                for(var i=0;i<fav.length;i++){
                    if(fav[i].checked){     //
                        alert(fav[i].value);   //其中fav沒有值，但是fav.value有值，無法打印fav,但是可以打印fav.value
                    }
                }
            }
//            實現(xiàn)全選操作
            function checkBoxselect(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){
                        fav[i].checked=true;
                }
            }
//            實現(xiàn)清空選擇操作
            function checkBoxclear(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){
                    fav[i].checked=false;
                }
            }
//            實現(xiàn)反選操作
            function checkBoxchange(){
                var fav=document.getElementsByName("fav");
                for(var i=0;i<fav.length;i++){   //=是賦值符==和===才是判斷符
                    if(fav[i].checked){
                        fav[i].checked=false;
                    }else{
                        fav[i].checked=true;
                    }
                }
            }
            function selectoper(){
//                獲取單選框對象
                var sel=document.getElementById("Animation");
//                獲取單選框內(nèi)的選項
                var os=sel.options;
                for(var i=0;i<os.length;i++){
                    if(os[i].selected){
                        alert(os[i].value+":"+os[i].text);
                    }
                }
            }
        </script>
    </head>
    <body>
        <h3>form表單操作</h3>
        <!--添加readonly表示標簽只能讀，添加disabled標簽表示該標簽不能進行任何操作-->
        <input type="button" name="" id="" value="測試form表單" onclick="testForm()" />
        <input type="button" name="" id="" value="測試form表單基本操作" onclick="testOper()" />
        <input type="button" name="" id="" value="測試form表單checkbox" onclick="testCheck()" />
        <input type="button" name="" id="" value="測試form表單checkbox全擇" onclick="checkBoxselect()" />
        <input type="button" name="" id="" value="測試form表單checkbox清空選擇" onclick="checkBoxclear()" />
        <input type="button" name="" id="" value="測試form表單checkbox反選" onclick="checkBoxchange()" />
        <input type="button" name="" id="" value="測試form表單select操作" onclick="selectoper()" />
        <hr />
        <form action="#" method="get" id="fm" name="frm" target="_blank">
            <b>用戶名</b><input type="text" name="wd" id="" value="" disabled="disabled" /><br /><br />
            &nbsp;&nbsp;&nbsp;<b>密碼</b><input type="password" name="pwd" id="" value="" readonly="readonly"/><br />
            <br />
            愛好 <br />
            動漫<input type="checkbox" name="fav" id="fav" value="動漫" checked="false"/><br />
            游戲<input type="checkbox" name="fav" id="fav" value="游戲" checked="false"/><br />
            電影<input type="checkbox" name="fav" id="fav" value="電影" checked=""true/><br />
            敲代碼<input type="checkbox" name="fav" id="fav" value="敲代碼" checked="false"/><br />
            <br /><br />
            <select name="" id="Animation">
                <option value="">clannad</option>
                <option value="">花開物語</option>
                <option value="">未聞花名</option>
                <option value="">四月是你的謊言</option>
            </select>
            <br /><br />
            <input type="submit" name="" id="" value="登錄" />
        </form>
    </body>
</html>

運行效果：