重拾JS-19-DOM（part3）

最新推荐文章于 2024-08-11 18:40:36 发布

事与愿同

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量56

点赞数

分类专栏：重拾JS 文章标签： javascript

本文链接：https://blog.csdn.net/lhe_foolishpig/article/details/117489019

版权

重拾JS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

节点操作：删除节点

  <button>删除</button>
    <ul>
        <li>路明非</li>
        <li>楚雨航</li>
        <li>陈墨瞳</li>
    </ul>
    <script>
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
    </script>

删除留言案例：

   <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
    <script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('你还没输入内容');
                return false;
            } else {
                //1.创建元素
                var li = document.createElement('li');
                //2.给li赋值
                li.innerHTML = text.value + "<a href='javascript:;''>删除</a>";
                //3.添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0])
                    //删除元素
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }

            }
        }
    </script>

复制节点：

   <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        //1.括号为空或者里面是flase 浅拷贝 只复制标签不复制里面的内容
        //2.括号为true； 深拷贝  复制标签页复制内容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

案例：动态生成表格

<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: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }];


        var tbody = document.querySelector('tbody');
        for (var i = 0; i < datas.length; i++) {
            // 1. 创建 tr行
            var trs = document.createElement('tr');
            tbody.appendChild(trs);
            // 2. 行里面创建单元格(跟数据有关系的3个单元格) td 单元格的数量取决于每个对象里面的属性个数  for循环遍历对象 datas[i]
            for (var k in datas[i]) {
                var tds = document.createElement('td');
                tds.innerHTML = datas[i][k];
                trs.appendChild(tds);
            }
            // 3. 创建有删除2个字的单元格 
            var tds = document.createElement('td');
            tds.innerHTML = '<a href="javascript:;">删除 </a>';
            trs.appendChild(tds);
        }
        // 4. 删除操作 开始 
        var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>
</body>

三种创建元素方式区别

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

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

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

4.createElement（）创建多个元素效率稍微低一点点，但是结构更加清晰

    <button>点击</button>
    <p>abc</p>
    <div class="inner"></div>
    <div class="create"></div>
    <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>

事与愿同

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
重拾JS-19-DOM（part3）

节点操作：删除节点 <button>删除</button> <ul> <li>路明非</li> <li>楚雨航</li> <li>陈墨瞳</li> </ul> <script> var btn = document.querySelector('button'); .
复制链接

扫一扫