节点操作2

创建节点

document.createElement(‘tagName’)
document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

添加节点

1. node.appendChild(child)
   node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾，类似于 css 里面的 after 伪元素
2. node.insertBefore (child, 指定元素)
   insertBefore () 方法将一个节点添加到父节点的指定子节点前面，类似于css里面的 before 伪元素

简单版发布留言案例

案例分析

1. 核心思路：点击按钮之后，动态创建一个 li，添加到 ul 里面。
2. 创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li
3. 如果想要新的留言后面显示就用appendChild 如果想要前面显示就用 insertBefore

代码

<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 == 0) {
                alert('请输入内容');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value;
                ul.insertBefore(li, ul.children[0]);
                text.value = '';
            }
        }
    </script>

删除节点

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

删除节点案例

案例分析：

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

		var as = document.querySelectorAll('a');
        for (var i = 0; i < as.length; i++) {
            as[i].onclick = function() {
            // node.removeChild(child); 删除的是 li 当前 a 所在的 li
                ul.removeChild(this.parentNode);
            }
        }

复制节点

node.cloneNode()
node.cloneNode()方法返回电泳该方法的节点的一个副本。
注意：

1. 如果括号参数为空或者为false，则是浅拷贝，即只克隆赋值节点本身，不克隆里面的子节点
2. 如果括号里面的参数为 true ，则为深拷贝，复制节点本身以及里面的所有子节点

动态生成表格案例

案例分析

1. 因为里面的学生数据都是动态的，我们需要js动态生成。这里模拟数据，自己定义好数据，数据采取对象形式存储。
2. 所有的数据都放在tbody里面的行例
3. 因为行很多，所以要循环创建多个行
4. 在行里面创建单元格并将数据填入单元格中
5. 创建删除单元格并进行删除操作
   代码：

//1.准备好学生的数据
var datas = [{
    name: '张小明',
    subject: 'JavaScript',
    score: 100
}, {
    name: '李晓红',
    subject: 'JavaScript',
    score: 98
}, {
    name: '张三',
    subject: 'JavaScript',
    score: 99
}, {
    name: '李四',
    subject: 'JavaScript',
    score: 88
}];
//2.往 tbody 里面创建行：有几个人（通过数组的长度）就创建几行
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { //外面的循环管 tr
    //1.创建 tr 行
    var tr = document.createElement('tr');
    tbody.appendChild(tr);
    //2.行里面创建单元格（跟数据有关系的3个单元格）td 单元格的数量取决于每个对象里面的属性个数
    for (var k in datas[i]) { // 里面的循环管列 td
        //创建单元格
        var td = document.createElement('td');
        //把对象里面的属性值 datas[i][k] 给 td
        //console.log(datas[i][k]);
        td.innerHTML = datas[i][k];
        tr.appendChild(td);
    }
    //3.创建有删除2个字的单元格
    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);
    }
}
// for(var k in obj){
//     k 得到的是属性名
//     obj[k] 得到的是属性值
// }