javascript——HTML对象 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span{
                border: 1px solid #e85356;
                display: inline-block;
                width: 302px;
                background: #e4393c;
                height: 31px;
                line-height: 31px;
                color: #fff;
                font-size: 20px;
                font-family: 'Microsoft YaHei';
                text-align: center;
                cursor: pointer;
            }
            span:active{
                outline: rgb(77,144,254) auto 5px;
            }
        </style>
        <script>
        
            function test(){
                /**
                 * 1:radio    checkbox中的获取的属性
                 */
//                var elements = document.getElementsByName("bank");
//                for (var i=0;i<elements.length;i++) {
//                    console.log(elements[i].name);
//                    console.log(elements[i].checked);
//                    console.log(elements[i].disabled);
//                }
                /**
                 * 2;type="text"  type="password"  textarea中获取的属性和方法
                 */
//                    var element = document.getElementById("password");
//                        //element.disabled=true;//设置为禁用
//                        //element.readOnly=true;//只读
//                        element.focus();
                /**
                 * 3;select(option)中获取的属性和方法
                 */
                var element = document.getElementById("grade");
                //console.log(element.selectedIndex);
                
//                var options = element.options;
//                //console.log(options[element.selectedIndex].value);
//                for (var i=0;i<options.length;i++) {
//                    console.log(options[i].value+","+options[i].selected+","+options[i].text);
//                }


                var option=new Option("四年级",'4');
                element.add(option);
                element.remove(0);
            }
            
            
            
        </script>
    </head 
    <body>
        <form action="http://www.baidu.com">
            <input type="radio"name="bank" value="0" />农业
            <input type="radio"name="bank" value="1" />工商
            
            <input type="password" id="password" />
            
            
            <select id="grade">
                <option value="1">一年级</option>
                <option value="2">2年级</option>
                <option value="3" selected="selected">3年级</option>
            </select>
            <span onclick="test()">提交</span>
        </form>
    </body>
</html>

 

posted @ 2018-08-21 18:26  木&子  阅读(287)  评论(0)    收藏  举报