JSdocument对象--Javaweb

最新推荐文章于 2021-11-25 10:58:09 发布

MC6058

最新推荐文章于 2021-11-25 10:58:09 发布

阅读量100

点赞数

分类专栏： Javaweb

本文链接：https://blog.csdn.net/chenzitian6058/article/details/116243312

版权

Javaweb 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

createElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            let divs = document.createElement("div");
            divs.innerHTML = "子天真溜";
            document.body.appendChild(divs);
        }

    </script>
</head>
<body>

</body>
</html>

getElementById

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        span{
            color: red;
        }
    </style>
    <script type="text/javascript">
        // 当用户点击了校验按钮，获取输入框里面的内容是否合法
        // 验证的规则是必须由字母，下划线，数字组成，长度在5--12之间
        function onclickFun() {
            let byId = document.getElementById('001');
            let value = byId.value
            let patt = /^\w{5,12}$/;
            let spanId = document.getElementById("002");
            // alert('名字');
            // alert(byId.name);
            if (patt.test(value)) {
                // alert('用户名合法');
                spanId.innerHTML = "用户名合法";
                spanId.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            } else {
                // alert('用户名不合法');
                spanId.innerText = "用户名不合法";
                spanId.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";

            }
        }
    </script>
</head>
<body>
use_name: <input type="text" id="001" value="112">
<span id="002"> </span>
<button onclick="onclickFun()">校验</button>
</body>
</html>

getElementsByName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        var checkAll = function () {
            let name = document.getElementsByName("hobby");
            for (var i = 0; i < name.length; i++) {
                name[i].checked = true;
            }
        }

        // 全不选
        function checkNo() {
            let name = document.getElementsByName("hobby");
            for (var i = 0; i < name.length; i++) {
                name[i].checked = false;
            }
        }

        // 反选
        function checkReverse() {
            let name = document.getElementsByName("hobby");
            for (var i = 0; i < name.length; i++) {
                // if (name[i].checked) {
                //     name[i].checked = false;
                // } else {
                //     name[i].checked = true;
                // }
                name[i].checked = !name[i].checked;
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="JS">JavaScript<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</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() {
            let name = document.getElementsByTagName("input");
            for (var i = 0; i < name.length; i++) {
                name[i].checked = true;
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="Java">Java
<input type="checkbox" value="JS">JavaScript<br/>
<button onclick="checkAll()">全选</button>
</body>
</html>

MC6058

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JSdocument对象--Javaweb

createElement<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { let divs = document.createElement("div");
复制链接

扫一扫