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

最新推荐文章于 2023-10-17 22:22:09 发布

年轻的猴

最新推荐文章于 2023-10-17 22:22:09 发布

阅读量481

点赞数

文章标签： html javaweb js

本文链接：https://blog.csdn.net/qq_42388853/article/details/107827994

版权

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>