DOM对象之节点操作(2)

最新推荐文章于 2024-09-21 21:02:07 发布

码码码

最新推荐文章于 2024-09-21 21:02:07 发布

阅读量183

点赞数

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

本文链接：https://blog.csdn.net/m0_53417841/article/details/125577735

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、删除节点

node.removeChild(child)

node.removeChild() 方法从 DOM 中删除一个子节点，返回删除的节点。

<!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>
</head>
<body>
    <button>删除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光头强</li>
    </ul>
    <script>
        //1.获取元素
        var ul=document.querySelector('ul');
        var btn = document.querySelector('button');
        //2.删除元素  node.removeChild(child)
        //3.点击按钮一次删除里面的孩子
        btn.onclick=function(){
            if(ul.children.length==0){
                this.disabled=true;
            }else{
                ul.removeChild(ul.children[0]);
            }
        }
    </script>
</body>
</html>

二、案例1：删除留言版

案例分析：

当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接
需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li
阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;


<!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>留言板</title>
    <style>
         * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }
        
        ul {
            margin-top: 50px;
        }
        
        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        li a{
            float: right;
        }
    </style>
</head>
<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        var btn=document.querySelector('button');
        var text=document.querySelector('textarea');
        var ul=document.querySelector('ul');
        btn.onclick=function(){
            if(text.value==''){
                alert('请输入内容');
                return false;
            }else{
            //（1）创建节点
            var li=document.createElement('li');
            li.innerText=text.value+"<a href='javascript:;'>删除</a>";
            //href=javascript:;阻止跳转
            //（2）添加节点
        //    ul.appendChild(li);
              ul.insertBefore(li,ul.children[0]);
              //删除元素  删除的是当前链接的li 它的父亲
              var as=document.querySelectorAll('a');
              for(var i=0;i<as.length;i++){
                  as[i].onclick=function(){
                      //删除当前a所在的li
                      ul.removeChild(this.parentNode);
                  }
              }
            }
            


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

三、复制节点

node.cloneNode()

node.cloneNode() 方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

1. 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

2. 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

<!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>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul=document.querySelector('ul');
        //1.复制节点 node.cloneNode 括号为空或者里面是false 浅拷贝 
        var lili=ul.children[0].cloneNode(true);  //深拷贝
        ul.appendChild(lili);
        


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

四、案例2：动态生成表格

因为里面的学生数据都是动态的，我们需要js 动态生成。这里我们模拟数据，自己定义好数据。数据我们采取对象形式存储。
所有的数据都是放到tbody里面的行里面。
因为行很多，我们需要循环创建多个行（对应多少人）
每个行里面又有很多单元格（对应里面的数据），我们还继续使用循环创建多个单元格，并且把数据存入里面（双重for循环）
最后一列单元格是删除，需要单独创建单元格。
最后添加删除操作，单击删除，可以删除当前行。

<!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>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        
        td,
        th {
            border: 1px solid #333;
        }
        
        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        //1、准备数据
        //多个数据运用数组
        var datas=[{
            name:'程小强',
            subject:'JavaScript',
            score:100
        },{
            name:'狐狸',
            subject:'JavaScript',
            score:98
        },{
            name:'抚痕',
            subject:'JavaScript',
            score:97
        },{
            name:'米业',
            subject:'JavaScript',
            score:96
        },{
            name:'小伙',
            subject:'JavaScript',
            score:89
        }]
        // 2. 往tbody 里面创建行： 有几个人（通过数组的长度）我们就创建几行
        var tbody=document.querySelector('tbody');
        for(var i=0;i<datas.length;i++){
            //创建节点
            var tr=document.createElement('tr');
            //添加节点
            tbody.appendChild(tr);
            //行里面创建几个单元格 td 
            for(var k in datas[i]){
                //创建几个单元格
                var td=document.createElement('td');
                //把对象里的属性值 给 td
                //console.log(data[i][k]);
                td.innerHTML=datas[i][k];
                tr.appendChild(td);

            }
            //创建有删除两个字的单元格
            var td=document.createElement('td');
            td.innerText='<a href="javascript:;">删除</a>';
            tr.appendChild(td);

            // for(var i in obj){
            //     i:属性名
            //     obj[i]:属性值
            // }
            
            //获取a标签元素
            var as=document.getElementsByTagName('a');
            for(var i=0;i<as.length;i++){
                as[i].onclick=function(){
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
        }
    </script>
</body>
</html>

五、三种动态创建数组的区别

document.write()

element.innerHTML

document.createElement()

区别：

1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘

2. innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘

3. innerHTML 创建多个元素效率更高（不要拼接字符串，采取数组形式拼接），结构稍微复杂

4. createElement() 创建多个元素效率稍低一点点，但是结构更清晰

总结：不同浏览器下，innerHTML 效率要比 creatElement 高

<!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>
</head>
<body>
    <button>点击</button>
    <p>abc</p>
    <script>
        window.onload=function(){
            document.write('<div>123</div>');
        }
        //三种创建元素方式区别
        //1.document.write() 创建元素 直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
        // var btn=document.querySelector('button');
        // btn.onclick=function(){
        //     document.write('<div>123</div>');

        // }
        // 2. innerHTML 创建元素
        var inner = document.querySelector('.inner');
        // for (var i = 0; i <= 100; i++) {
        //     inner.innerHTML += '<a href="#">百度</a>'
        // }
        var arr = [];
        for (var i = 0; i <= 100; i++) {
            arr.push('<a href="#">百度</a>');
        }
        inner.innerHTML = arr.join('');
        // 3. document.createElement() 创建元素
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
        
    </script>
</body>
</html>