我的WebAPI學習（四）------ 節點操作

節點操作

刪除節點

node.removeChild()方法子節點，返回刪除的節點

<button>刪除</button>
<ul>
     <li>aa</li>
     <li>bb</li>
      li>cc</li>
</ul>
<script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        btn.onclick = function() {
            if (ul.children.length == 0) {
                this.disabled = true;
            } else {
                ul.removeChild(ul.children[0]);
            }
        }
 </script>

案例：刪除留言

<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 {
                var li = document.createElement('li');
                li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";
                ul.insertBefore(li, ul.children[0]);
                var as = document.querySelectorAll('a');
                for (var i = 0; i < as.length; i++) {
                    as[i].onclick = function() {
                        ul.removeChild(this.parentNode);
                    }
                }
            }
        }
    </script>

複製節點

<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>

創建元素

只記錄常用的

    <script>
    	// 法一：效率最慢
        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('');
        // 法三
        var create = document.querySelector('.create');
        for (var i = 0; i <= 100; i++) {
            var a = document.createElement('a');
            create.appendChild(a);
        }
    </script>

事件高級

註冊事件的方式

事件監聽

eventTarget.addEventListener()方法將指定的監聽器註冊到 eventTarget（目標對象）上，當該對象觸發指定的事件時，就會執行事件處理函數。

<button>傳統註冊事件</button>
<button>方法監聽註冊事件</button>
<button>ie9 attachEvent</button>
<script>
    var btns = document.querySelectorAll('button');
    btns[1].addEventListener('click', function() {
        alert(1);
    })
</script>

阻止默認行爲

    <a href="http://www.baidu.com">百度</a>
    <script>
        // 2. 阻止默認行爲 讓鏈接不跳轉 
        var a = document.querySelector('a');
        a.addEventListener('click', function(e) {
             e.preventDefault(); //  dom 標準寫法
        });
    </script>

事件委託

<script>
 // 事件委託的核心原理：給父節點添加偵聽器， 利用事件冒泡影響每一個子節點
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {         
            e.target.style.backgroundColor = 'pink';
})
</script>
    ```