JS基础之DOM节点和网页元素基本操作练习（下拉列表和复选框操作案例）

最新推荐文章于 2023-10-07 15:03:47 发布
最新推荐文章于 2023-10-07 15:03:47 发布
阅读量229 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZQsSpace/article/details/128930208
版权

1、练习一， 通过选择省份，获取所选省份的城市

  效果图：

   code：

<!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">
    <title>Document</title>
    <style>
        select>option:first-child{
            display: none;
        }
    </style>
    <script>
        var data = [
            {
                "sheng":"内蒙古",
                "shi":["呼和浩特","包头","乌海","赤峰","通辽","鄂尔多斯","呼伦贝尔","巴彦淖尔","乌兰察布","兴安","锡林郭勒","阿拉善"]
            },
            {
                "sheng":"辽宁",
                "shi":["沈阳","大连","鞍山","抚顺","本溪","丹东","锦州","营口","阜新","辽阳","盘锦","铁岭","朝阳","葫芦岛"]
            },
            {
                "sheng":"吉林",
                "shi":["长春","吉林","四平","辽源","通化","白山","松原","白城","延边"]
            },
            {
                "sheng":"四川",
                "shi":["成都","自贡","攀枝花","泸州","德阳","绵阳","广元","遂宁","内江","乐山","南充","宜宾","广安","达州","眉山","雅安","巴中","资阳","阿坝","甘孜","凉山"]
            },
            {
                "sheng":"山西",
                "shi":["太原","大同","阳泉","长治","晋城","朔州","晋中","运城","忻州","临汾","吕梁"]
            },
            {
                "sheng":"河北",
                "shi":["石家庄","唐山","秦皇岛","邯郸","邢台","保定","张家口","承德","沧州","廊坊","衡水"]
            },
        ];

        
    </script>
</head>
<body onload="prac1_load()">
    <h3>练习1：根据选择的省份，筛选出对应的城市</h3>
    <p>
        省：<select id="sheng">
            <option value="null" selected>请选择省份</option>
        </select>
        市：<select id="shi">
            <option value="null" selected>请选择城市</option>
        </select>
    </p>

    <script>

        let sheng = document.querySelector("#sheng");
        let shi = document.querySelector("#shi");

        // 添加下拉列表选项,num=1时为省，num=2时为市
        function createOptions(data, num){
            // 定义文档碎片，以减少节点树改变次数，节约性能
            let docFrag = document.createDocumentFragment();
            if(num == 1){
                for(let i=0;i<data.length;i++){
                    let option = document.createElement("option");
                    option.value = data[i]["sheng"];
                    option.innerText = data[i]["sheng"];
                    docFrag.appendChild(option);
                }
                sheng.appendChild(docFrag);
            }else if(num == 2){
                // 每次添加市选项时，删除前一次添加的选项
                shi.innerHTML = "";
                for(let i=0;i<data.length;i++){
                    let option = document.createElement("option");
                    option.value = data[i];
                    option.innerText = data[i];
                    docFrag.appendChild(option);
                }
                shi.appendChild(docFrag);
            }

        }

        // 将可选省份添加到下拉列表
        function prac1_load(){
            createOptions(data,1);
            sheng.onchange = function(){
                createOptions(data[sheng.selectedIndex-1].shi ,2);
            }
        }

    </script>

</body>
</html>

2、练习二，复选框的全选与反选

  效果图：

  code：

<!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">
    <title>Document</title>
    <style>
         #prac2{
            width: 400px;
            border: 1px solid black;
            border-collapse: collapse;
        }
        #prac2>thead>tr{
            background-color: #cacaca;
        }
        #prac2>tr{
            border-top: 1px solid #42424260;
        }
        #prac2>tr:hover{
            background-color: #cacaca60;
        }
        #prac2 td{
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>练习2：复选框的全选与反选</h3>
    <table id="prac2">
        <thead>
            <tr>
                <th><input type="checkbox" id="checkAll"></th>
                <th>学号</th>
                <th>姓名</th>
                <th>班级</th>
            </tr>
        </thead>
    </table>

    <p><button onclick="check_all()">全部选中</button><button onclick="reCheck()">反选</button></p>

    <script>
        // 定义数据集
        var data2 = [
            {
                "sid":"001",
                "name":"张三",
                "classes":"F07",
            },
            {
                "sid":"002",
                "name":"李四",
                "classes":"F07",
            },
            {
                "sid":"003",
                "name":"王五",
                "classes":"F07",
            },
            {
                "sid":"004",
                "name":"赵六",
                "classes":"F07",
            }
        ];
        
        // 创建单元格函数需要在下面一行前执行，否则下一行不能获取到元素节点
        createTr();
        let box = document.querySelectorAll(".checks");
        let checkall = document.querySelector("#checkAll");

        // 创建表格每行数据
        function createTr(){
            // 定义文档碎片，以减少节点树改变次数，节约性能
            let docFrag = document.createDocumentFragment();
            let table = document.querySelector("#prac2");
            // 创建单元格，一行四列
            for(let i=0;i<data2.length;i++){
                let tr = document.createElement("tr");

                let checkbox = document.createElement("input");
                checkbox.className = "checks";
                checkbox.type = "checkbox";

                let td = document.createElement("td");
                let td1 = document.createElement("td");
                let td2 = document.createElement("td");
                let td3 = document.createElement("td");

                td.appendChild(checkbox);
                td1.innerText = data2[i].sid;
                td2.innerText = data2[i].name;
                td3.innerText = data2[i].classes;

                tr.appendChild(td);
                tr.appendChild(td1);
                tr.appendChild(td2);
                tr.appendChild(td3);

                docFrag.appendChild(tr);
            }
            table.appendChild(docFrag);

        }

        checkboxBindListener();
        // 复选框绑定事件
        function checkboxBindListener(){
            for(let i=0;i<box.length;i++){
                box[i].onchange=function(){
                    ifCheckall();
                }
            }
        }

        // 全选框是否选中
        function ifCheckall(){
            if(isAllChecked()){
                checkall.checked = true;
            }else{
                checkall.checked = false;
            }
        }

        // 判断复选框是否全选中
        function isAllChecked(){
            for(let i=0;i<box.length;i++){
                if(!box[i].checked){
                    return false;
                }
            }
            return true;
        }

        // 全选
        function check_all(){ 
            for(let i=0;i<box.length;i++){
                box[i].checked = true;
            }
            ifCheckall();
        }

        // 反选
        function reCheck(){
            for(let i=0;i<box.length;i++){
                if(box[i].checked){
                    box[i].checked = false;
                }else{
                    box[i].checked = true;
                }
            }
            ifCheckall();
        }

        // 全选框状态改变事件
        checkall.onchange = function(){
            if(checkall.checked){
                check_all();
            }else{
                check_all();
                reCheck();
            }
        }
    </script>
    
</body>
</html>

3、练习三，下拉列表多选项的移动

  效果图：

  code：

<!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">
    <title>Document</title>
    <style>
        section{
            display: flex;
        }
        section select{
            width: 100px;
            height: 150px;
        }
        section select option:first-child{
            display: block;
        }
        .action{
            display: block;
        }
    </style>
</head>
<body>
    <h3>练习三：下拉列表选项转移</h3>
    <section>
        <div>
            <select id="front" multiple="multiple">
                <option value="刘备">刘备</option>
                <option value="关羽">关羽</option>
                <option value="张飞">张飞</option>
                <option value="马超">马超</option>
                <option value="曹操">曹操</option>
            </select>
        </div>
        <div>
            <button class="action" onclick="addRight()">&gt;</button>
            <button class="action" onclick="addRightAll()">&gt;&gt;</button>
            <button class="action" onclick="addLeft()">&lt;</button>
            <button class="action" onclick="addLeftAll()">&lt;&lt;</button>
        </div>
        <div>
            <select id="after" multiple="multiple">
            </select>
        </div>
    </section>
    
    <script>
        let front = document.querySelector("#front"); // 左下拉列表
        let after = document.querySelector("#after"); // 右下拉列表
        let f_ops,a_ops;

        // 左边添加到右边
        function addRight(){
            f_ops = front.selectedOptions;  //获取front内选中的选项
            for(let i=0;i<f_ops.length;i++){
                after.appendChild(f_ops[i]);
                i--;
            }

            // .forEach() 循环遍历数组
            // let ii = document.querySelectorAll("#front option")
            // ii.forEach(x => {
            //     if(x.selected){
            //         after.appendChild(x);
            //     }
            // });
         
        }

        // 右边添加到左边
        function addLeft(){
            a_ops = after.selectedOptions;  //获取after内选中的选项
            for(let i=0;i<a_ops.length;i++){
                front.appendChild(a_ops[i]);
                i--;
            }
        }
        
        // 左边全部添加到右边
        function addRightAll(){
            f_ops = front.options;  //获取front内的选项
            for(let i=0;i<f_ops.length;i++){
                after.appendChild(f_ops[i]);
                i--;
            }
        }

        // 右边全部添加到左边
        function addLeftAll(){
            a_ops = after.options;  //获取after内的选项
            for(let i=0;i<a_ops.length;i++){
                front.appendChild(a_ops[i]);
                i--;
            }
        }

    </script>
</body>
</html>

新手上路，如有错误，望大佬们指正。

ZQsSpace
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM操作实例练习
qq_62089165的博客
09-01 917
综合案例-网页轮播图效果案例
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
主要介绍了JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支,结合实例形式总结分析了JS页面加载事件，数组操作，DOM节点操作，循环和分支所涉及的相关事件、函数及操作注意事项,需要的朋友可以...
JS——初始DOM的相关操作练习
Bonsoir777的博客
08-20 359
前文介绍了初识DOM的相关知识点（感兴趣的朋友欢迎翻阅），本文就向大家分享一些利用对DOM操作解决简单实际应用的过程。
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 1522
整一些可以练着玩的熟悉语法的DOM小例子
【学习笔记41】DOM操作的练习
yizhiyang
11-27 648
DOM操作的练习
原生js实现下拉框，支持多选、搜索
最新发布
shikaixina的博客
10-07 3106
通过js事件绑定实现支持搜索，多选的下拉框
jQuery移动和复制dom节点实用DOM操作案例
12-12
本文章简单的介绍了关于jQuery移动和复制dom节点程序实现，有需要学习的朋友可参考参考。 在做一个项目时，需要dom节点移动，如以下代码： 代码如下:<div></div> <p></p>需要把p标签移动到div标签里，经过测试发现，...
基本DOM节点操作
11-26
1、获取元素节点 getElementById()：获取指定唯一id的元素。 getElementByTagName()：获取指定元素标签名的元素数组。 getElementByName()：获取具有指定属性name的元素数组。 2、子节点 element.childNodes：返回该...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
主要介绍了JS实现DOM节点插入操作之子节点与兄弟节点插入操作,涉及JavaScript节点的创建、添加简单操作技巧,需要的朋友可以参考下
js使用DOM设置单选按钮、复选框及下拉菜单的方法
10-24
主要介绍了js使用DOM设置单选按钮、复选框及下拉菜单的方法,较为详细的分析了单选按钮、复选框及下拉菜单的具体用法及实现技巧,非常具有实用价值,需要的朋友可以参考下
js_HTML_Dom操作练习
10-15
js_HTML_Dom操作练习，比较基础的
原生js实现下拉多选框组件
qq_62089165的博客
02-12 3464
【代码】原生js实现下拉多选框组件。
DOM操作练习
阿甘正传
09-12 1658
DOM操作练习 举例1：点击按钮时，显示和隐藏盒子。 代码实现： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> button { ...
DOM编程-获取下拉列表选中项的value
heliuerya的博客
02-10 603
DOM编程-获取下拉列表选中项的value
js DOM 中基础功能练习
weixin_42181824的博客
05-27 1769
11111                                                                                                                                                                                                   ...
DOM树操作练习（增删改复制节点）
风动云彩
03-13 559
代码示例：&lt;html&gt; &lt;head&gt; &lt;title&gt;案例二&lt;/title&gt; &lt;style type="text/css"&gt; #div1{ border:5px dashed red; width:350px; height:250px; } &lt;/style&gt; &lt;/head&am
JS DOM操作练习
qq_46266956的博客
01-09 553
JS和数学图像结合，dom操作练习 效果图如下 代码冗杂，功能也不太完善，还有很多缺点 <!DOCTYPE html> <html> <head> <title>demo</title> </head> <body> <input id="btnClick1" type="button" value="sin" onclick="sin1();sin2();"/> <inpu..
js dom查询练习
bigmeow_lyj的博客
04-15 447
代码： onload事件会在整个页面加载完成之后再触发 如果将script标签写在head里，就要为window绑定一个onload事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hello</title> <style type...
DOM小练习
Vivian_shuang的博客
07-12 515
DOCTYPE html> html> head> meta charset="utf-8" /> title>title> head> body> div> 葫芦娃 div> input type="text" name="text1" id="text1" value="" /> input type="button" name="" id="btn"
强化DOM基础知识，学习如何在JavaScript 中操作HTML元素和 CSS样式心得
06-02
操作 HTML 元素和 CSS 样式是 JavaScript 中重要的 DOM 操作。以下是一些心得： 1. 获取元素：可以使用 `document.getElementById()`、`document.getElementsByClassName()`、`document.getElementsByTagName()` 和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值