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

事件進階

注冊事件的方式

事件監聽

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