web前端练习26----Dom2,节点的 创建添加，删除，替换，克隆，innerHTML，innerText，显示隐藏及练习

Posted 2023-03-01 zhaihaohao1

下面以这个 html 作为例子 操作：

    <!--节点的 创建添加，删除，替换，克隆 -->
    <div>这是几个人</div>
    <ul id="peopleUl" name='ulName'>
        <li id="lip1" type="text">刘备</li>
        <li>关羽</li>
        <li>张飞</li>
    </ul>
    <div>这是几个动物</div>
    <ul id="animalUl">
        <li id="liA1">猪</li>
        <li>狗</li>
        <li>牛</li>
    </ul>
    <button id="buttonAdd">添加子节点</button></br>
    <button id="buttonChaRu">插入子节点</button></br>
    <button id="buttonDel">删除子节点</button></br>
    <button id="buttonTiHuan">替换子节点</button></br>
    <button id="buttonKeLong">克隆节点</button></br>
    <button id="buttonInnerHTML">innerHTML</button></br>
    <button id="buttonInnerText">innerText</button></br>

一、添加子节点：

1、添加子节点

创建并添加子节点,是添加到末尾

创建节点

let liNode = document.createElement('li');

添加子节点

ulNode.appendChild(liNode);

        

            let buttonAdd = document.getElementById('buttonAdd');
            buttonAdd.onclick = function () 
                // 创建一个li节点，并添加文本和属性
                let liNode = document.createElement('li');
                liNode.innerText = '创建的新节点';
                liNode.type = 'zhh';

                let peopleUl = document.getElementById('peopleUl');
                peopleUl.appendChild(liNode);
            
        

2、插入子节点

把给定节点插到子节点的前面

除了插入之外，还有移动功能

把 zhu 插到 liubei 前面

peopleUl.insertBefore(zhu, liubei);

        
            let buttonChaRu = document.getElementById('buttonChaRu');
            buttonChaRu.onclick = function () 
                // 拿到ul节点
                let peopleUl = document.getElementById('peopleUl');
                // 拿到刘备节点
                let liubei = peopleUl.getElementsByTagName('li')[0];

                // 拿到 猪 的节点
                let zhu = document.getElementById('liA1');
                // 把 zhu 插到 liubei 前面
                peopleUl.insertBefore(zhu, liubei);
            

        

二、删除子节点

ulNode.removeChild(bjNode);

        
            let buttonDel = document.getElementById('buttonDel');
            buttonDel.onclick = function () 

                // 拿到刘备节点
                let lbNode = document.getElementById('lip1');
                // 拿到刘备节点的父节点
                let ulNode = lbNode.parentElement;
                // 删除子节点
                ulNode.removeChild(lbNode);
            
        

三、替换子节点

replaceChild 把父元素里面的子节点替换为另外一个节点

        
            
            let buttonTiHuan = document.getElementById('buttonTiHuan');
            buttonTiHuan.onclick = function () 

                let zhu = document.getElementById('liA1');
                // 替换
                // 拿到被替换的节点
                let liubei = document.getElementById('lip1');
                // 拿到父节点,把刘备替换成猪
                let liubeiParent = liubei.parentElement;
                liubeiParent.replaceChild(zhu, liubei);
            
        

四、克隆节点

Node.cloneNode(true) 方法返回调用该方法的节点的一个副本.

点击事件克隆不了，要手动赋值

        
            let buttonKeLong = document.getElementById('buttonKeLong');
            buttonKeLong.onclick = function () 
                let li = document.getElementById('lip1');
                let cloneLi = li.cloneNode(true);
                console.log(cloneLi);
            

        

五、innerHTML 和 innerText

对象.innerHTML拿到里面的子标签，是一个字符串类型。可以查找，修改，增加，删除

对象.innerText 拿到标签里面的文本，是一个字符串类型。可以查找，可以修改

        
            let buttonInnerHTML = document.getElementById('buttonInnerHTML');
            buttonInnerHTML.onclick = function() 
                // 对象.innerHTML拿到里面的子标签，是一个字符串类型
                // 可以查找，可以修改

                let people = document.getElementById('peopleUl');
                // 查找标签
                console.log(people.innerHTML);
                // 修改标签
                people.innerHTML = '<li>猪</li>';
                // 增加标签
                people.innerHTML = people.innerHTML + '<li>狗</li>';
                // 删除标签
                people.innerHTML = '';

            

            let buttonInnerText = document.getElementById('buttonInnerText');
            buttonInnerText.onclick = function() 
                let people = document.getElementById('peopleUl');
                let zhu = people.getElementsByTagName('li')[0];
                // 对象.innerText 拿到标签里面的文本，是一个字符串类型
                // 查找文本
                console.log(zhu.innerText);
                // 修改文本
                zhu.innerText = '狗';

            

        

六、元素的显示隐藏

https://www.cnblogs.com/chenlimei/p/11134358.html

练习

案例1插入节点练习

js自带的函数中是有 insertBefore();从子元素的前面插入一个元素，没有从子元素的后面插入的函数，
我们可以自己定义一个insertAfter();从子元素的后面插入一个元素的函数
具体实现如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
     <!-- 把给定节点插到子节点的后面 -->
    <ul id="idPeople">
        <li id="liubei">刘备</li>
        <li>关羽</li>
        <li id="zhangfei">张飞</li>
    </ul>

    <ul>
        <li id="idZhu">猪</li>
        <li>狗</li>
        <li>牛</li>
    </ul>
    <button id="charu">插入节点</button>


    <script>
       let charu = document.getElementById('charu');

       charu.onclick = function()
        let zhu = document.getElementById('idZhu');
        let liubei = document.getElementById('liubei');
        // 把 猪 插到 刘备 的后面
        afterInsterNode(zhu,liubei);

       
     

        // 自定义把给定节点，插入到子节点的后面
        function afterInsterNode(newNode, selfNode) 
            // 拿到person节点
            let ulPeople = selfNode.parentElement;
            let lis = ulPeople.getElementsByTagName('li');
            //拿到最后一个节点
            let li= lis[(lis.length-1)];
            
            if(selfNode == li)
                ulPeople.appendChild(newNode);
            else
                //拿到下一个兄弟节点
                let nextNode= selfNode.nextSibling;
                ulPeople.insertBefore(newNode,nextNode);
            
            
           

        


    </script>
</body>

</html>

 

案例2添加删除子节点的练习

例子：添加员工信息，删除员工信息
效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table 
            border: 1px solid black;
            border-collapse: collapse;
            margin-top: 30px;
        
 
        th 
            border: 1px solid red;
        
 
        td 
            border: 1px solid blue;
        
    </style>
 
</head>
 
<body>
    <!-- 添加删除节点的练习 -->
    <div>员工信息</div>
    姓名：<input type="text" name="姓名" id="idName" placeholder="输入姓名" value="zhhhhhh">
    邮箱：<input type="text" name="邮箱" id="idEmail" placeholder="输入邮箱" value="[e-mail]">
    工资：<input type="text" name="工资" id="idGongzi" placeholder="输入工资" value="50000">
    <div><button id="idButton">提交员工信息</button></div>
    <table>
        <tbody id="idTbody">
            <!-- 第一行 -->
            <tr>
                <th>姓名</th>
                <th>邮箱</th>
                <th>工资</th>
                <th></th>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>zhhhhh</td>
                <td>[e-mail]</td>
                <td>50000</td>
                <td><a href="https://www.baidu.com/">删除</a></td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>zhhhhh</td>
                <td>[e-mail]</td>
                <td>50000</td>
                <td><a href="https://www.baidu.com/">删除</a></td>
            </tr>
 
        </tbody>
    </table>
    <script>
        // js 逻辑先拿到三个输入框的对象
        // 拿到名称
        let nameEle = document.getElementById('idName');
        // 拿到邮箱
        let emailEle = document.getElementById('idEmail');
        // 拿到工资
        let gongziEle = document.getElementById('idGongzi');
        // 拿到提交按钮
        let buttonEle = document.getElementById('idButton');
        // 拿到表内容的 idTbody
        let tbodyEle = document.getElementById('idTbody');
 
 
 
 
        // 拿到里面的值
        buttonEle.onclick = function () 
            let nameValue = nameEle.value;
            let emailValue = emailEle.value;
            let gongziValue = gongziEle.value;
            // 创建tr标签
            let tr = document.createElement('tr');
            // 创建4个td标签
            let td1 = document.createElement('td');
            td1.innerText = nameValue;
 
            let td2 = document.createElement('td');
            td2.innerText = emailValue;
 
            let td3 = document.createElement('td');
            td3.innerText = gongziValue;
 
            // 添加一个删除
            let td4 = document.createElement('td');
            let a = document.createElement('a');
            a.href = 'https://www.baidu.com/';
            a.innerText = '删除';
            td4.appendChild(a);
 
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
 
            tbodyEle.appendChild(tr);
            // 函数调用一下
            deleteRow();
        
        // 删除一行
        function deleteRow() 
            // 拿到所有的a链接
            let aArray = document.getElementsByTagName('a');
            // 循环 a 获得点击设置点击事件
            for (let i = 0; i < aArray.length; i++) 
                aArray[i].onclick = function () 
                    // 拿到表内容
                    let tbody = this.parentElement.parentElement.parentElement;
                    // 当前点击的那一行
                    let tr = this.parentElement.parentElement
                                      
                    let shanchu = confirm('真的要删除吗'+tr.innerText);
                    if (shanchu) 
                        tbody.removeChild(tr);
                    
                    // 取消默认行为，跳转
                    return false;
                    
                
            
        
 
 
 
 
 
 
 
 
 
    </script>
</body>
 
</html>

   

案例3替换和克隆的练习

写个例子，节点的互换
点击北京，北京和中国 两个节点互换
点击上海，上海和英国 两个节点互换
效果图如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 替换节点的练习 -->
    <div>你喜欢那个城市</div>
    <ul id="ulCity">
        <li id="bj">北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <div>你喜欢那个国家</div>
    <ul id="ulGuoJia">
        <li id="zg">中国</li>
        <li>英国</li>
        <li>德国</li>
        <li>法国</li>
    </ul>
    <script>
        let city = document.getElementById('ulCity');
        let citys = city.getElementsByTagName('li');

        let guojia = document.getElementById('ulGuoJia');
        let guojias = guojia.getElementsByTagName('li');


        for (let i = 0; i < citys.length; i++) 
            citys[i].onclick = function () 
                huhuan(citys[i], guojias[i]);
            
        

        for (let j = 0; j < guojias.length; j++) 
            guojias[j].onclick = function () 
                huhuan(citys[j], guojias[j]);
            

        


        function huhuan(bj, zg) 
            let chishiUl = bj.parentElement;
            let guojiaUl = zg.parentElement;
            // 克隆城市
            let zg2 = zg.cloneNode(true);
            zg2.onclick = zg.onclick;

            let bj2 = bj.cloneNode(true);
            bj2.onclick = bj.onclick;

            chishiUl.replaceChild(zg2, bj);
            guojiaUl.replaceChild(bj2, zg);

        



    </script>
</body>

</html>

案例4 左右联动

选择左边的省，右边对应选择省的城市

效果图：

代码如下：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <select id="province"></select>
    <select id="city"></select>

    <script>
        // 造一组数据
        let data = [
            province: '陕西',
            citys: ['西安', '咸阳', '宝鸡', '商洛'],
        , 
            province: '江苏',
            citys: ['南京', '无锡', '徐州', '常州'],
        , 
            province: '甘肃',
            citys: ['天水', '白银', '平凉', '酒泉'],
        ];
        // 拿到节点
        // 拿到省的节点
        let provinceElement = document.getElementById('province');
        // 拿到市的节点
        let cityElement = document.getElementById('city');
        data.forEach(function(value, index) 
            //先把省显示出来
            let option = document.createElement('option');
            option.innerText = value.province;
            provinceElement.appendChild(option);

            if (value.province == '陕西') 
                // 拿到的省 默认陕西，城市默认陕西的城市
                let cityArray = value.citys;
                cityArray.forEach(function(value, index) 
                    let option = document.createElement('option');
                    option.innerHTML = value;
                    cityElement.appendChild(option);
                );
            
        );
        // 选择左边的省，对应右边的城市
        provinceElement.onchange = function() 
            let shengValue = provinceElement.options[provinceElement.selectedIndex].value;
            data.forEach(function(value, index) 
                if (value.province == shengValue) 
                    let cityArray = value.citys;
                    cityElement.innerHTML = '';
                    cityArray.forEach(function(value, index) 
                        let option = document.createElement('option');
                        option.innerHTML = value;
                        cityElement.appendChild(option);
                    );


                

            );

        
    </script>
</body>

</html>

案例5 购物车全选

全选，取消全选，所有的产品都选择，全选会选中

效果图：

代码如下：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <label>选择商品：<input type="checkbox" id="isAll" />全选</label></br>
    <label><input type="checkbox" name="star" /> 衣服</label></br>
    <label><input type="checkbox" name="star" /> 电脑</label></br>
    <label><input type="checkbox" name="star" /> 手机</label></br>
    <label><input type="checkbox" name="star" /> 帽子</label></br>
    <label><input type="checkbox" name="star" /> 袜子</label></br>
    <script>
        let isAllElement = document.getElementById('isAll');
        // 拿到明星的集合
        let starCollection = document.getElementsByName('star');
        let starArray = [...starCollection];
        isAllElement.onclick = function() 
                let isChecked = isAllElement.checked;
                if (isChecked) 
                    // 全选
                    starArray.forEach(function(value, index) 
                        let inputElement = value;
                        inputElement.checked = true;
                    );

                 else 
                    // 全不选
                    starArray.forEach(function(value, index) 
                        let inputElement = value;
                        inputElement.checked = false;
                    );

                
            
            // 给明星选择框加点击事件
        starArray.forEach(function(value, index) 
            let inputElement = value;
            inputElement.onclick = function() 
                let count = 0;
                starArray.forEach(function(value, index) 
                    if (value.checked) 
                        count++;
                    
                );

                if (count == starArray.length) 
                    isAllElement.checked = true;
                 else 
                    isAllElement.checked = false;
                
            

        );
    </script>
</body>

</html>

案例6 改变图片练习：

需求：
点击按钮切换图片:

效果图：

实现思路：
1把图片路径放到一个数组中
2设置一个记录数组下标的变量
3点击按钮用数组的不同下标拿到不同的图片显示出来

实现代码如下：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <title>Document</title>
    <style>
        * 
            margin: 0px;
            padding: 0px;
        
        
        .root 
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: gold;
        
    </style>
</head>

<body>
    <div class="root">
        <p style="color:blue;" id="pid">说明</p>
        <img id="image" style="width: 200px; height: 300px;" src="images/1.jpg">
        <span>
            <button id="buttonLast">上一页</button>
            <button id="buttonNext">下一页</button>
        </span>
    </div>
    <script>
        // 开始写js完成图片切换
        let imgArray = [
            'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3191706504,3660193373&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=25834440,1968595786&fm=26&gp=0.jpg',
            'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2179462493,1065615808&fm=26&gp=0.jpg',
            'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1738712335,2051263509&fm=26&gp=0.jpg',
            'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=315442729,2232652672&fm=26&gp=0.jpg'
        ];
        // 图片节点对象
        let image = document.getElementById('image');
        image.src = imgArray[0];
        // 上一个按钮对象
        let buttonLast = document.getElementById('buttonLast');
        // 下一个按钮对象
        let buttonNext = document.getElementById('buttonNext');
        let pid = document.getElementById('pid');
        // 设置上面的标题
        pid.innerText = `一共有$imgArray.length张,现在是第1张`;
        // 设置一个变量，来记录数组中的下标
        let index = 0;
        // 上一个按钮
        buttonLast.onclick = function() 
                index--;
                if (index < 0) 
                    index = imgArray.length - 1;
                
                image.src = imgArray[index];
                pid.innerText = `一共有$imgArray.length张,现在是第$index+1张`;
            
            // 下一个按钮
        buttonNext.onclick = function() 
            index++;
            if (index > (imgArray.length - 1)) 
                index = 0;
            
            image.src = imgArray[index];
            pid.innerText = `一共有$imgArray.length张,现在是第$index+1张`;
        
    </script>



</body>

</html>