3-31 javascript（全选练习）

慕醒_mx

已于 2022-04-01 22:03:20 修改

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript

于 2022-03-31 21:49:17 首次发布

本文链接：https://blog.csdn.net/moran_123/article/details/123884427

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

3-31 javascript

DOM

获取元素节点的子节点

●通过具体的元素节点调用.

getElementsBy TagName()

方法,返回当前节点的指定标签名后代节点

childNodes ，

属性,表示当前节点的所有子节点
childNodes属性会获取包括文本节点在内的所有节点
根据DOM标签标签间空白也会当成文本节点
children属性可以获取当前元素的所有子元素

firstChild

属性,表示当前节点的第一个子节点

lastChild

属性，表示当前节点的最后一个子节点

获取父节点和兄弟节点

通过具体的节点调用

parentNode

属性，表示当前节点的父节点

previousSibling

属性,表示当前节点的前一个兄弟节点
会获取包括文本节点在内的所有节点

previous ElementSibling

属性，获取前一个兄弟元素，IE8及以下不支持

nextSibling

属性，表示当前节点的后-个兄弟节点

innerText:

该属性可以获取到元素内部的文本内容
它和innerHTML类似，不同的是它会自动将html去除

全选练习

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="D:\wpp快好好学习\前端\代码\前端基础\bread.png" type="image/x-icon">
    <title>3-31 全选练习</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .first {
            width: 500px;
            margin: 0 auto;
            padding-top: 100px;
        }

        .box {
            width: 500px;
            height: 500px;
            background-color: beige;
        }

        .btn {
            border: 0px;
            background-color: rgb(162, 231, 208);
            padding: 5px 10px 5px 10px;
            margin: 10px;
            cursor: pointer;
        }
        .btn:hover {
            border: 0px;
            background-color: rgb(151, 240, 210);
            padding: px 10px 5px 10px;
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="first">
        <div class="box">
            <div style="padding: 20px;">
                <p style="font-size: 20px;">请选择你最喜欢的老公：</p>
                <input type="checkbox" name="hus" value="张艺兴" />张艺兴
                <input type="checkbox" name="hus" value="曾柯朗" />曾柯朗
                <input type="checkbox" name="hus" value="檀健次" />檀健次
                <input type="checkbox" name="hus" value="汪苏泷" />汪苏泷
                <br><br>
                <button class="btn" id="checkAll">全选</button>
                <button class="btn" id="noCheck">全不选</button>
                <button class="btn" id="reCheck">反选</button>
                <button class="btn" id="send">提交</button>
            </div>

        </div>
    </div>
    <script>
        window.onload = function () {
            // checkAll
            var checkAll = document.getElementById("checkAll");
            var noCheck = document.getElementById("noCheck");
            var reCheck = document.getElementById("reCheck");
            var send = document.getElementById("send");

            checkAll.onclick = function () {
                var checkbox = document.getElementsByName("hus");
                for (let i = 0; i < checkbox.length; i++) {
                    checkbox[i].checked = true;
                };
            };

            noCheck.onclick = function () {
                var checkbox = document.getElementsByName("hus");
                for (let i = 0; i < checkbox.length; i++) {
                    checkbox[i].checked = false;
                };
            };

            reCheck.onclick = function () {
                var checkbox = document.getElementsByName("hus");
                for (let i = 0; i < checkbox.length; i++) {
                    if (checkbox[i].checked == true) {
                        checkbox[i].checked = false;
                    }
                    else{
                        checkbox[i].checked = true;
                    }
                    
                };
            };
            send.onclick = function () {
                var sendAll = document.getElementsByName("hus");
                for (let i = 0; i < sendAll.length; i++) {
                if (sendAll[i].checked == true) {
                    alert("我最喜欢 "+sendAll[i].value+" 宝贝啦！！");
                }
            }
            }
        }
    </script>
</body>

</html>

全选练习

慕醒_mx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3-31 javascript（全选练习）

3-31 javascriptDOM获取元素节点的子节点●通过具体的元素节点调用.getElementsBy TagName()方法,返回当前节点的指定标签名后代节点childNodes ，属性,表示当前节点的所有子节点childNodes属性会获取包括文本节点在内的所有节点根据DOM标签标签间空白也会当成文本节点children属性可以获取当前元素的所有子元素firstChild属性,表示当前节点的第一个子节点lastChild属性，表示当前节点
复制链接

扫一扫

专栏目录