Js查漏补缺-07

0x00 兄弟节点

    nextSibling();获取的是下一个兄弟节点 // 包括文本节点

    previousSibling();获取的是上一个兄弟节点 // 包括文本节点

    nextElementSibling();获取的是下一个兄弟元素节点

    previousElementSibling();获取的是上一个兄弟元素节点； //这两种方法需要ie9以上才支持

    creatElement;创建一个元素;

    appendChild();向指定元素添加子节点；

    insertBefore(newNode, referenceNode);向指定元素添加子节点，添加在指定位置的前面；

    阻止<a>标签跳转可以将href设为"javascript:;"

    node.cloneNode(bool);克隆节点  bool为0为浅拷贝，只拷贝节点本身；为一则完全拷贝（包括子节点）

    示例 简单学生信息管理组件:

  <script>
    let data = [{
        name : 'chino',
        sex : '女',
        object : 'Javascript',
        grade : 100
    },{
        name : '张三',
        sex : '男',
        object : 'Javascript',
        grade : 80
    },{
        name : '狄仁杰',
        sex : '男',
        object : 'Javascript',
        grade : 90
    }]
    for (let i = 0;i < data.length;i++){
        let tr = document.createElement('tr');
        let tbody = document.querySelector('tbody');
        tbody.appendChild(tr);
        for(let k in data[i]){
            let td = document.createElement('td');
            td.innerText = data[i][k];
            tr.appendChild(td);
        }
        let btn = document.createElement('td');
        btn.innerHTML = '<a href="javascript:;">删除</a>';
        tr.appendChild(btn);
        let a = document.querySelectorAll('a');
        for(let i = 0;i < a.length;i++){
            a[i].onclick = () => {
                tbody.removeChild(a[i].parentElement.parentElement);
            }
        }
    }
  </script>