学习博客:javaweb-js中document对象的使用

document . getElementById( elementId)
通过标签的id属性查找标签dom对象,elementId 是标签的id属性值
document . getElement sByName (elementName)
通过标签的name属性查找标签dom对象,elementName 标签的name属性值
document . getEl ement sByTagName( tagname )
通过标签名查找标签dom对象。tagname 是标签名
document .createElement( tagName)
方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
   /*     需求:当用户点击了较验按钮,要获取输出框中的内容。然后验证其是否合法。
    验证的规则是:必须由字母,数字。下划线组成。并且长度是5到12位。*/
        function onclickFun() {
        var usernameobj=document.getElementById("username");
        var usernameText=usernameobj.value;
        var patt=/^\w{5,12}$/;
        var spanobj=document.getElementById("usernamespan");
        if (patt.test(usernameText))
            {
                //spanobj.innerHTML="用户名正确";
                spanobj.innerHTML=
                    " <img src=\"打勾.jpg\" height=\"18\" width=\"18\"/>";
            }
        else
            {
               //spanobj.innerHTML="用户名错误";
                spanobj.innerHTML=" <img src=\"打叉.jpg\" height=\"18\" width=\"18\"/>";
            }
        }

    </script>
</head>
<body>
        请输入用户名:<input type="text" id="username" value="请输入用户名"/>
        <span id="usernamespan"style="color: red"></span>
                    <button onclick="onclickFun();">校验</button><br>
        <div>必须由字母,数字。下划线组成。并且长度是5到12位。</div>

</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
        var checkObj=document.getElementsByName("hobby");

        for (var i=0;i<checkObj.length;i++)
            {
            checkObj[i].checked=true;
            }
        }
        function checkNo() {
            var checkObj=document.getElementsByName("hobby");
            for (var i=0;i<checkObj.length;i++)
            {
                checkObj[i].checked=false;
            }
        }
        function checkReverse() {
            var checkObj=document.getElementsByName("hobby");
            for (var i=0;i<checkObj.length;i++)
            {
                checkObj[i].checked=!checkObj[i].checked;
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" name="hobby" value="c">c
    <input type="checkbox" name="hobby" value="js">js
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="c++">c++<br/>
    <button onclick="checkAll();">全选</button>
    <button onclick="checkNo();">全不选</button>
    <button onclick="checkReverse();">反选</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
        var inputs =document.getElementsByTagName("input");
        for (var i=0;i<inputs.length;i++)
            {
            inputs[i].checked=true;
            }
        }
       
    </script>
</head>
<body>
    <input type="checkbox" value="c">c
    <input  type="checkbox" value="js">js
    <input type="checkbox"  value="java">java
    <input type="checkbox"  value="c++">c++<br/>
    <button onclick="checkAll();">全选</button>
     
</body>
</html>
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页