js操作html元素

<form name="form1" id="form1">
        <table id="tab" border="1px" style="border-collapse:collapse;">
                <caption>测试</caption> 
                <tr>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                </tr>
                <tr>
                        <td>22</td>
                        <td>23</td>
                        <td>24</td>
                </tr>
                <tr>
                        <td>31</td>
                        <td>32</td>
                        <td>33</td>
                </tr>
        </table>
</form>
<form name="form2" id="form2">
        <input type="button" name="btn1" id="btn1" value="btn1"><br/>
        <input type="text" name="text1" id="text1"><br/>
        <input type="file" name="file1" id="file1"><br/>
        <input type="radio" name="sex" id="male" value="1" checked>male<br/>
        <input type="radio" name="sex" id="female"  value="2">female<br/>
        <input type="checkbox" name="checkbox" id="bike">bike<br/>
        <input type="checkbox" name="checkbox" id="car">car<br/>
        <a href="#">测试</a><br/>        
        <img src=""/><br/>
        <input type="submit" name="" id=""/><br/>
        <select name="" id="select">
                <option value="0">请输入</option>
                <option value="1">北京</option>
                <option value="2">上海</option>
        </select><br/>
        <textarea rows="" cols="" name="" id=""></textarea><br/>
        <input type="submit" value="submit">
</form>
<script type="text/javascript">
        /*******************************
        一、操作form
        ********************************/
        var form1 = document.forms["form1"];
        var form2 = document.forms[1];
        或var form1 = document.forms.form1;
            alert(form1);
        alert(form1.name);
        alert(form2.id);
        alert(document.forms.length);
        /*******************************
        二、操作table
        ********************************/
        var table1  = document.getElementById("tab");
        alert(table1);
        var trs = table1.rows;
        for(var i=0;i<trs.length;i++){
                document.write(trs.length+"\n");
                var tds = trs[i].cells;
                for(var j=0;j<tds.length;j++){
                        alert(tds[j].firstChild.nodeValue);
                }
        }
        /*******************************
        三、操作textfield
        ********************************/
        var text1 = document.getElementById("text1");
        alert(text1.value);
        /*******************************
        四、操作radio
        ********************************/
        var radios = document.getElementsByName("sex");
        alert(radios.length);
        for(var i=0;i<radios.length;i++){
                if(radios[i].checked){ 
                        alert(radios[i].value);
                        break;
                }
        }
        /*******************************
        五、操作checkbox
        ********************************/
        var checkboxs = document.getElementsByName("checkbox");
        alert(checkboxs.length);
        /*全选*/
        for(var i=0;i<checkboxs.length;i++){
                checkboxs[i].checked = true;
        }
        /*全不选*/
        for(var i=0;i<checkboxs.length;i++){
                checkboxs[i].checked = false;
        }
        /*反选*/
        for(var i=0;i<checkboxs.length;i++){
                checkboxs[i].checked = !checkboxs[i].checked;
        }
        /*******************************
        六、操作select
        ********************************/
        var select = document.getElementById("select");
        var options = select.options;
        var currSelectIndex = select.selectedIndex;
        alert(select.value);
        alert(options.length);
        alert(options[currSelectIndex].value+options[currSelectIndex].text);
        /*设置默认选中项*/
        for (var i = 0; i < options.length; i++) {        
       if (options[i].text == "北京") {        
           options[i].selected = true;        
           break;        
       }        
        }  
        /*删除某项*/
        options.remove(0);
        /*添加某项*/
        options.add(new Option("请输入",0)); 
        /*******************************
        七、操作image
        ********************************/
       var images = document.images;
       for(var i=0;i<images.length;i++){
           //alert(images[i].src);
       }
       var img1 =  document.images.img1;
       alert(img1.src);
</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值