web-js总结（6）

学习目标：

1.复制节点
2.动态生成表格
3.三种创建元素的方法

学习内容：

1.复制节点
node,cloneNode(）浅拷贝，只复制了节点标签
node.cloneNode(true)深拷贝，复制节点和内容
复制节点后，node.appendChild()将节点加入到想要加入的节点中。

    <script>
        var ul = document.querySelector('ul')
        //1.node.cloneNode
        var lili = ul.children[0].cloneNode();
        ul.appendChild(lili)
//2.node.cloneNode(true)深拷贝
    </script>

2.动态生成表格
1.先准保好学生数据存入到datas数组中。
2.往tbody里创建行，有几个创建几个行
3.往行里面创建单元格td，循环将对象里属性赋值给td。
4.创建删除单元格。
5.给删除绑定点击事件，点击删除，删除a所在的行，node.removeChild(child)

    <script>
        // 1.先去准备好学生的数据
        var datas = [{
            name: '魏璎珞',
            subject: 'JavaScript',
            score: 100
        }, {
            name: '弘历',
            subject: 'JavaScript',
            score: 98
        }, {
            name: '傅恒',
            subject: 'JavaScript',
            score: 99
        }, {
            name: '明玉',
            subject: 'JavaScript',
            score: 88
        }, {
            name: '大猪蹄子',
            subject: 'JavaScript',
            score: 0
        }];
        //往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.innerHTML = datas[i][k]
                tr.appendChild(td)
                //把对象里面的属性值给td
                //datas【i】[k]
            }
            //3.创建有删除的单元格
            var td = document.createElement('td')
            td.innerHTML = '<a href="javascript:;">删除</a>'
            tr.appendChild(td)
        }
        //4.删除操作开始
        var as = document.querySelectorAll('a')
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function () {
                //点击a删除当前a所在的行，node.removeChild(child) 链接的父亲的父亲
                tbody.removeChild(this.parentNode.parentNode)
            }
        }
    </script>

3.三种创建元素的方法

  //三种创建元素方式的区别
        //1.document.write()创建元素,时直接将内容写入页面的内容流，但文档流执行完毕，则导致页面全部重绘
        // var btn = document.querySelector('button')
        // btn.onclick = function () {
        //     document.write('<div>123</div>')
        // }

        //2.innerHtml创建元素，是将内容写入某个DOM节点，不会导致页面重绘
        //innerHtml创建多个元素效率更高，（不要拼接字符串，采用数组形式拼接）结构稍微复杂
        //creatElement（）创建多个元素效率稍微低一点，但结构更加清晰
        //总结 不同浏览器下，innerHtml效率比creatElement高

学习时间：

2021.9.22