初識JS_WebAPI基礎Day3——筆記整理+1課後作業...

一.節點操作

文章目錄
1 . 刪除節點
2. 複製（克隆）節點
3. 創建元素的三種方式
4. innerTHML和createElement效率對比
5.DOM學習總結
二.事件高級
1 . 事件監聽
2. 事件監聽兼容性解決方案
3. 刪除事件（解綁事件）
4. 刪除事件兼容性解決方案
5. 事件對象
6. e.target 和 this 的區別
7.阻止默認行爲
7. 阻止事件冒泡
8.事件委託
9.鼠標事件對象

1. 刪除節點

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

 //  刪除元素  node.removeChild(child)
 ul.removeChild(ul.children[0]);

2. 複製（克隆）節點

// 1. node.cloneNode(); 括號爲空或者裏面是false 淺拷貝 只複製標籤不復制裏面的內容
// 2. node.cloneNode(true); 括號爲true 深拷貝 複製標籤複製裏面的內容

3. 創建元素的三種方式

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

5.DOM學習總結

關於dom操作，我們主要針對於元素的操作。主要有創建、增、刪、改、查、屬性操作、事件操作。

1.創建：

document.write
innerHTML
createElement

2.增

appendChild
inserBefore

3.刪

removeChild

4.改

主要修改dom的元素屬性，dom元素的內容、屬性、表單的值等
1.元素屬性：src、href、title等等
2.普通元素內容：innerHTML、innerText
3.修改表單元素：value、type、disabled等
4.樣式：style、className

5.查

1.API方法：getElementById、getElementByTagName 古老語法，不推薦
2.H5新增：querySelector、querySelectorAll 推薦
3.利用節點操作獲取元素：父節點parentNode、子節點children、兄弟previousElementSibling、nextElementSibling  推薦

6.主要針對自定義屬性的操作

1.setAttribute:設置dom的屬性值
2.getAttribute:得到dom屬性值
3.removeAttribute： 移除屬性

二.事件高級

1. 事件監聽

addEventListener()事件監聽（IE9以後支持）

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

2. 事件監聽兼容性解決方案

封裝一個函數，函數中判斷瀏覽器的類型：

3. 刪除事件（解綁事件）

4. 刪除事件兼容性解決方案

5.dom事件流(面試經典)
☆ 事件流描述的是從頁面接收事件的順序。
☆ 事件發生時會在元素節點之間按照特定的順序傳播，這個傳播過程就爲 DOM事件流

DOM 事件流會經歷3個階段：

捕獲階段
當前目標階段
冒泡階段

 <div class="father">
        <div class="son">son盒子</div>
 </div>
// 冒泡階段 如果addEventListener 第三個參數是 false 或者 省略 
// son -> father ->body -> html -> document
----------------------------------------
// 捕獲階段：如果addEventListener() 第三個參數是 true 那麼在捕獲階段觸發
// document -> html -> body -> father -> son

5. 事件對象

事件發生後，跟事件相關的一系列信息數據的集合都放到這個對象裏面，這個對象就是事件對象。
常見屬性和方法：

6. e.target 和 this 的區別

this 是事件綁定的元素（綁定這個事件處理函數的元素）。
e.target 是事件觸發的元素。

常情況下terget 和 this是一致的，
但有一種情況不同，那就是在事件冒泡時（父子元素有相同事件，單擊子元素，父元素的事件處理函數也會被觸發執行），
這時候this指向的是父元素，因爲它是綁定事件的元素對象，
而target指向的是子元素，因爲他是觸發事件的那個具體元素對象。

7.阻止默認行爲

html中一些標籤有默認行爲，例如a標籤被單擊後，默認會進行頁面跳轉。

 <a href="http://www.baidu.com">百度</a>
<script>
	//  傳統的註冊方式
	a.onclick = function(e) {
	// 普通瀏覽器 e.preventDefault();  方法
	e.preventDefault();
	// 低版本瀏覽器 ie678  returnValue  屬性
	e.returnValue = false;
	// 我們可以利用return false 也能阻止默認行爲 沒有兼容性問題
	return false;
    }
</script>

7. 阻止事件冒泡

8.事件委託

事件委託也稱爲事件代理，在 jQuery 裏面稱爲事件委派。

說白了就是，不給子元素註冊事件，給父元素註冊事件，把處理代碼在父元素的事件中執行。

事件委託的原理
給父元素註冊事件，利用事件冒泡，當子元素的事件觸發，會冒泡到父元素，然後去控制相應的子元素。

9.鼠標事件對象

此部分爲習題部分：

動態添加列表

題目描述

頁面上有一些美女列表，當單擊li時背景色變爲紅色，但點擊按鈕時會新增1個美女到列表最前面，並且單擊新增的美女背景也會變爲紅色，具體表現如下圖：
1）要求使用到事件委託

<body>
  <ul id="ul">
    <li>西施</li>
    <li>貂蟬</li>
    <li>昭君</li>
    <li>鳳姐</li>
    <li>芙蓉姐姐</li>
  </ul>
  <input type="button" value="按鈕" id="btn" />
  <script>
    // 利用事件委託（事件冒泡），給新創建的元素也註冊上事件
    var ul = document.getElementById('ul');
    ul.onclick = function (e) {
      e.target.style.backgroundColor = 'red';
    }
    // 單擊按鈕，添加一個新的li
    var btn = document.getElementById('btn');
    btn.onclick = function(){
      var liObj = document.createElement('li');
      liObj.innerHTML = '楊超越';
      ul.insertBefore(liObj, ul.children[0]);
    }
  </script>
</body>

分享