document三个方法获取对象

最新推荐文章于 2024-08-26 17:50:05 发布

衰小孩、519

最新推荐文章于 2024-08-26 17:50:05 发布

阅读量1.3k

点赞数

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/A_JOKER___/article/details/121086980

版权

JavaWeb 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

主要方法

请添加图片描述

getElementById方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        需求;当用户点击了较验按钮，要获取输出框中的内容。然后验证其是否合法。
        验证的规则是:必须由字母，数字，下划线组成。并且长度是5到12位。
        **/
        function onclickfun(){
            //1.要操作一个标签，先获取它的对象
            var usernameobj = document.getElementById("username");
            //2.获取它的value
            var value = usernameobj.value;

            //3.设置正则表达式匹配模式
            var regStr  = /^\w{5,12}$/;
            //4.进行匹配
            //test方法用于测试某个字符串是否符合匹配规则
            //匹配返回true，不匹配返回false

            //操作span标签
            //innerHTML代表起始标签和结束标签中的内容
            //innerHTML属性可读可写
            var spanobj = document.getElementById("span");
            if (regStr.test(value)){
                spanobj.innerHTML="<img src=\"right.png\" width=\"18px\" height=\"18px\">";
            }else {
                spanobj.innerHTML="<img src=\"wrong.png\" width=\"18px\" height=\"18px\">";
            }
        }
    </script>
</head>
<body>
用户名：<input type="text" value="xxx" id="username">
<button onclick="onclickfun()">确认</button>
<span style="color: red" id="span"></span>
</body>
</html>

getElementsByName方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function checkall(){
            //让所有复选框都选中
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象合集
            //这个集合的操作跟数组一样
            //集合中都是dom对象
            var hobbyobj = document.getElementsByName("hobby");
            //checked表示复选框的选中状态。如果选中是true，不选中是false
            //check属性可读可写,有序
            for (var i = 0; i < hobbyobj.length; i++) {
                hobbyobj[i].checked=true;
            }
        }

        //全不选
        function checknone(){
            var hobbyobj = document.getElementsByName("hobby");
            //checked表示复选框的选中状态。如果选中是true，不选中是false
            //check属性可读可写
            for (var i = 0; i < hobbyobj.length; i++) {
                hobbyobj[i].checked=false;
            }
        }

        //反选
        function checkreverse(){
            var hobbyobj = document.getElementsByName("hobby");
            for (var i = 0; i < hobbyobj.length; i++) {
                hobbyobj[i].checked=!hobbyobj[i].checked;
                // if (hobbyobj[i].checked){
                //     hobbyobj[i].checked=false;
                // }else {
                //     hobbyobj[i].checked=true;
                // }
            }
        }
    </script>
</head>
<body>
兴趣爱好：<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="cpp">c++
<input type="checkbox" name="hobby" value="jsp">javascript
<br/>
<button onclick="checkall()">全选</button>
<button onclick="checknone()">全不选</button>
<button onclick="checkreverse()">反选</button>
</body>
</html>

getElementsByTagName方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function checkall(){
            //让所有复选框都选中
            //document.getElementsByTagName("input");是根据指定的name属性查询返回多个标签对象合集
            //这个集合的操作跟数组一样
            //集合中都是dom对象
            var inputobj = document.getElementsByTagName("input");
            for (var i = 0; i < inputobj.length; i++) {
                inputobj[i].checked=true;
            }
        }
    </script>
</head>
<body>
兴趣爱好：<input type="checkbox"  value="java">java
<input type="checkbox"  value="cpp">c++
<input type="checkbox"  value="jsp">javascript
<br/>
<button onclick="checkall()">全选</button>
</body>
</html>