JS(八)：DOM节点的增删改查与属性设值、作业【遮罩层】、【正反选】、【二级联动】

最新推荐文章于 2023-12-22 09:45:34 发布

冷凝娇

最新推荐文章于 2023-12-22 09:45:34 发布

阅读量289

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/ak739105231/article/details/93197538

版权

前端专栏收录该内容

30 篇文章 1 订阅

订阅专栏

一、node的CURD(增、删、改、查)：

1.增

a、createElement(name)创建元素

b、appendChild();将元素添加

2.删

a、获得要删除的元素

b、获得它的父元素

c、使用removeChild()方法删除

3.改

第一种方式：使用增和删结合完成修改：

replace(new标签，old标签)：用一个标签替换一个标签；

第二种方式：

使用setAttribute（）;方法修改属性

使用innerHTML属性修改元素的内容

4.查：使用之前方法；

下面截图说明：

二、如何给标签添加属性？

1.修改HTML DOM

改变HTML内容

改变元素内容的最简单的方法就是使用innerHTML，innerText;

改变CSS样式

<p id="p2">hello world</p>
document.getElementById("p2").style.color="blue";

改变HTML属性

elementNode.setAttribute(name.value)

即：元素.setAttribute(属性名，属性值)<-------->等效于：元素.属性="值"；

获得属性值：elementNode.getAttribute(name)

2.关于class的操作

elementNode.className >获取元素的classname

elementNode.classList.add >添加classname

elementNode.classList.remove >移除classname

下面作业：需求【点击一个按钮，页面整体出现一个半透明的遮罩层，在页面中央最外层，弹出框；点击弹出框里面的按钮，遮罩层及弹出框消失】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .content{
            height: 1800px;
            background-color: white;
        }
        .shade{
            position: fixed;
            top:0px;
            left:0px;
            right: 0px;
            bottom: 0px;
            background-color: gray;
            opacity: 0.6;
        }
        .model{
            width: 200px;
            height: 200px;
            background-color: bisque;
            position: absolute;
            top: 50%;
            right: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="content">
    <button onclick="func()">show</button>
    hello
</div>
<div class="shade hide"></div>
<div class="model hide">
    <button onclick="cancel()">取消</button>
</div>
<script>
    function func() {
        var ele_shade = document.getElementsByClassName("shade")[0];
        var ele_model = document.getElementsByClassName("model")[0];
        ele_model.classList.remove("hide");
        ele_shade.classList.remove("hide");
    }
    function cancel() {
        var ele_shade = document.getElementsByClassName("shade")[0];
        var ele_model = document.getElementsByClassName("model")[0];
        ele_shade.classList.add("hide");
        ele_model.classList.add("hide");
    }

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

下面是作业：正反选：有三个按钮：全选、取消、反选；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <button onclick="getall()">全选</button>
    <button onclick="unall()">取消</button>
    <button onclick="changegetall()">反选</button>
    <tr>
        <th>按钮</th>
        <th colspan="2">数字</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="get1" class="get get1"></td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="get2" class="get get2"></td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="get3" class="get get3"></td>
        <td>333</td>
        <td>333</td>
    </tr>
</table>
<script>
function getall() {
    var one=document.getElementsByClassName("get");
    for (var i=0;i<one.length;i++){
        one[i].checked=true;
    }
}
function unall() {
    var one=document.getElementsByClassName("get");
    for (var i=0;i<one.length;i++){
        one[i].checked=false;
    }
}
function changegetall() {
    var one=document.getElementsByClassName("get");
     for (var i=0;i<one.length;i++){
         if (one[i].checked) {
             one[i].checked = false;
         }
         else {
             one[i].checked = true;
         }
    }
}
</script>
</body>
</html>

二级联动：

根据选择的省份，显示可以选择的城市；通过js实现动态的效果；而不是html写死的option；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="shengfeng" id="province">
    <option value="">请选择省份</option>
</select>

<select id="city" name="">
    <option value="">请选择城市</option>
</select>

<script>
    data={"河北省":["石家庄","廊坊"],"山西省":["晋城","大同"],"陕西":["西安","延安"]};
    var pro_ele=document.getElementById("province");
    var city_ele=document.getElementById("city");
    for (var i in data){
        var ele=document.createElement("option");
        ele.innerHTML=i;
        pro_ele.appendChild(ele);
    }
    pro_ele.onchange=function () {
        <!--默认城市的显示option=1,即显示：请选择城市-->
        city_ele.options.length=1;
        <!--this.opthons：表示onchange的select元素的所有option标签；
            this.selectedIndex：表示选择的option元素的索引；-->
        var citys=data[this.options[this.selectedIndex].innerHTML];
        for (var i=0;i<citys.length;i++){
            var ele=document.createElement("option");
            ele.innerHTML=citys[i];
            city_ele.appendChild(ele);
        }
    }

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

冷凝娇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS(八)：DOM节点的增删改查与属性设值、作业【遮罩层】、【正反选】、【二级联动】

一、node的CURD(增、删、改、查)：1.增a、createElement(name)创建元素b、appendChild();将元素添加2.删a、获得要删除的元素b、获得它的父元素c、使用removeChild()方法删除3.改第一种方式：使用增和删结合完成修改：replace(new标签，old标签)：用一个标签替换一个标签；第二种方式：使用s...
复制链接

扫一扫