節點操做

1. 刪除節點

 

node.removeChild() 方法從 node節點中刪除一個子節點，返回刪除的節點。

    <button>刪除</button>
    <ul>
        <li>熊大</li>
        <li>熊二</li>
        <li>光頭強</li>
    </ul>
    <script>
        // 1.獲取元素
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        // 2. 刪除元素 node.removeChild(child)
        // ul.removeChild(ul.children[0]);
        // 3. 點擊按鈕依次刪除裏面的孩子
        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>
        // 1. 獲取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 2. 註冊事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('您沒有輸入內容');
                return false;
           } else {
                // console.log(text.value);
                // (1) 建立元素
                var li = document.createElement('li');
                // 先有li 才能賦值
                li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";
                // (2) 添加元素
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                // (3) 刪除元素 刪除的是當前連接的li 它的父親
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        // 刪除的是 li 當前a所在的li this.parentNode;
                        ul.removeChild(this.parentNode);
                   }
               }
           }
       }
    </script>

2.  複製（克隆）節點

    <ul>
        <li>1111</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 1. node.cloneNode(); 括號爲空或者裏面是false 淺拷貝 只複製標籤不復制裏面的內容
        // 2. node.cloneNode(true); 括號爲true 深拷貝 複製標籤複製裏面的內容
        var lili = ul.children[0].cloneNode(true);
        ul.appendChild(lili);
    </script>

3. 案例：動態生成表格

 

 

 

 

 

 

    <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
       }];
        // 2. 往tbody 裏面建立行： 有幾我的（經過數組的長度）咱們就建立幾行
        var tbody = document.querySelector('tbody');
  // 遍歷數組
        for (var i = 0; i < datas.length; i++) { 
            // 1. 建立 tr行
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            // 2. 行裏面建立單元格td 單元格的數量取決於每一個對象裏面的屬性個數  
            // 使用for in遍歷學生對象
            for (var k in datas[i]) { 
                // 建立單元格 
                var td = document.createElement('td');
                // 把對象裏面的屬性值 datas[i][k] 給 td  
                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)
           }
       }
    </script>

 

4.  建立元素的三種方式

 

 

 

    <script>
        // 三種建立元素方式區別 
        // 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>

 

5. innerTHML和createElement效率對比

innerHTML字符串拼接方式（效率低）

<script>
    function fn() {
        var d1 = +new Date();
        var str = '';
        for (var i = 0; i < 1000; i++) {
            document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';
       }
        var d2 = +new Date();
        console.log(d2 - d1);
   }
    fn();
</script>

createElement方式（效率通常）

<script>
    function fn() {
        var d1 = +new Date();
​
        for (var i = 0; i < 1000; i++) {
            var div = document.createElement('div');
            div.style.width = '100px';
            div.style.height = '2px';
            div.style.border = '1px solid red';
            document.body.appendChild(div);
       }
        var d2 = +new Date();
        console.log(d2 - d1);
   }
    fn();
</script>

innerHTML數組方式（效率高）

<script>
    function fn() {
        var d1 = +new Date();
        var array = [];
        for (var i = 0; i < 1000; i++) {
            array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');
       }
        document.body.innerHTML = array.join('');
        var d2 = +new Date();
        console.log(d2 - d1);
   }
    fn();
</script>