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>