JS中的DOM操作和事件

標籤：dom   cancel   子節點   儲存格   直接   數組   功能   冒泡   getattr   

 【DOM樹節點】
 DOM節點分為三大類： 元素節點、 屬性節點、 文本節點；

 文本節點、屬性節點屬於元素節點的子節點。操作時，均需要先取到元素節點，再操作子節點；

可以使用getElement系列方法，取到元素節點。

 【查看元素節點】
 1、getElementById：通過id取到唯一節點。如果ID重名，只能取到第一個。
 getElementsByName()： 通過name屬性
   getElementsByTagName()： 通過標籤名
   getElementsByClassName()： 通過class名

 >>> 擷取元素節點時，一定要注意：擷取節點的語句，必須在DOM渲染完成之後執行。 可以有兩種方式實現： ① 將JS代碼寫在body之後； ② 將代碼寫到window.onload函數之中；

 >>> 後面三個getElements，取到的是數組格式。不能直接添加各種屬性，而應該取出數組的每一個單獨操作。 例如：getElementsByName("name1")[0].onclick = function


 【查看/設定屬性節點】
 1、查看屬性節點：getAttribute("屬性名稱");
 2、設定屬性節點：setAttribute("屬性名稱","新屬性值");

 >>> 查看和設定屬性節點，必須先取到元素節點，才能使用。
 >>> setAttribute();函數在IE瀏覽器中可能會存在相容性問題。比如在IE中不支援使用這個函數設定style/onclick等樣式屬性和事件屬性。

 >>> 我們推薦使用點符號法替代上述函數：
 eg: dom1.style.color="" dom1.onclick="" dom1.src=""


 【總結-JS修改DOM節點的樣式】
 1、 使用setAttribute()設定class和style屬性，但是存在相容性問題，不提倡
 div.setAttribute("class","cls1");

2、 使用.className直接設定class類,注意是className而不是.class：
 div.className = "cls1";

 3、 使用.style設定單個屬性，注意屬性名稱要是用駝峰命名法：
 div.style.backgroundColor = "red";

 4、 使用.style 或 .style.cssText 設定多個樣式屬性：
 div.style = "background-color:red; color:yellow;"
 div.style.cssText = "background-color:red; color:yellow;" √


【查看設定文本節點】
 1、 .innerText: 取到或設定節點裡面文字內容；
 .innerHTML: 取到或設定節點裡面的HTML代碼；
 .tagName: 取到當前節點的標籤名。 標籤名全部大寫顯示。

 

【根據層次擷取節點】
 1 .childNodes： 擷取元素的所有子節點。包括斷行符號等文本節點。
 .children: 擷取當前元素的所有元素節點(只擷取標籤)。

 2 .firstChild: 擷取元素的第一個子節點。包括斷行符號等文本節點。
 .firstElementChild: 擷取元素的第一個子節點。不包括斷行符號等文本節點。
 .lastChild: 擷取元素的最後一個子節點。包括斷行符號等文本節點。
 .lastElementChild:

 3 .parentNode: 擷取當前節點的父節點。

 4 .previousSibling: 擷取當前節點的前一個兄弟節點；包括斷行符號等文本節點。
 .previousElementSibling:

 5 .nextSibling: 擷取當前節點的後一個兄弟節點；包括斷行符號等文本節點。
.nextElementSibling:

 6 .getAttributes: 擷取當前節點的屬性節點。

 

 【建立並新增節點】
 1. document.createElement("標籤名")：建立節點 。需要配合 setAttribute設定各種新的屬性；
 2. 父節點.appendChild(新節點)：末尾追加方式插入節點
 3. 父節點.insertBefore(新節點,目標節點)：在目標節點前插入新節點.
 4. 被複製節點.cloneNode(true/false)：複製節點
 >>> 傳入true： 表示複製當前節點，以及當前節點的所有子節點；
 >>> 傳入false或不傳： 表示只複製當前節點，而不複製子節點。

 【刪除或替換節點】
 1. 父節點.removeChild(被刪節點): 刪除父節點中的子節點；
 2. 父節點.replaceChild(新節點,老節點): 使用新節點，替換掉老節點。\n
 3. 節點.removeAttribute("屬性")：刪除屬性。

 

 [表格對象]
1、 rows屬性： 返回表格中的所有行，是一個數組格式；
 2、 insertRow(index): 在指定位置插入一行，index從0開始；
 3、 deleteRow(index): 刪除指定的一行，index從0開始；

 [行對象]
 1、 cells屬性： 返回這一行中的所有儲存格，是一個數組格式；
 2、 rowIndex屬性： 返回這一行是表格中的第幾行，從0開始；
 3、 insertCell(index): 在這一行指定位置，插入一個儲存格，index從0開始；
 4、 deleteCell(index): 刪除這一行的指定儲存格，index從0開始

 [儲存格對象]
 1、 cellIndex屬性： 返回這個儲存格是本行的第幾個，從0開始；
 2、 innerText innerHTML align className

 

 【JS中的事件分類】
 1、滑鼠事件
 click/dblclick/onmouseover/onmouseout

 2、HTML事件
 onload/onscroll/onsubmit/onchange/onfocus

 3、鍵盤事件
 keydown： 鍵盤按下時觸發
 keypress：鍵盤按下並鬆開的瞬間觸發
 keyup： 鍵盤抬起時觸發

 [注意事項]
 ① 執行順序：keydown->keypress->keyup->
 ② 當長按時，會迴圈執行keydown->keypress
 ③ 有keydown並不一定有keyup，當事件觸發過程中，滑鼠將游標
 移走將導致沒有keyup；
 ④ keypress只能捕獲鍵盤上的數字、字元、符號鍵，不能捕獲各種
 功能鍵，而keydown和keyup可以。
 ⑤ keypress支援區分大小寫，keydown和keyup並不支援。

 [確定觸發的按鍵]
 ① 在觸發的函數中，傳入一個參數e，表示鍵盤事件；
 ② 使用e.keyCode，取到按鍵的Ascii碼值，進而確定觸發按鍵；
 ③ 所有瀏覽器的相容寫法(一般並不需要)：
 var evn = e || event；
 var code = evn.keyCode || evn.which || evn.charCode;

 

 【JS中的DOM0事件模型】
 1、內聯模型(行內綁定)：直接將函數名作為HTML標籤的某個事件屬性的屬性值；
 eg：<button onclick="func()">DOM0內聯模型</button>
 缺點：違反了W3C關於HTML與JavaScript分離的基本原則；

 2、指令碼模型(動態綁定)：在JS指令碼中，取到某個節點，並添加事件屬性；
 eg：window.onload = function(){}
 優點：實現了HTML與JavaScript的分離。
 缺點：同一個節點，只能綁定一個同類型事件。如果綁定多次，最後一個生效。

【DOM2事件模型】
 1、添加事件綁定方式：
 ① IE8之前：btn2[2].attachEvent("onclick",函數)；
 ② 其他瀏覽器：btn2[2].addEventListener("click",函數，true/false)；
 參數三：false(預設) 表示事件冒泡 true 表示事件捕獲
 ③ 相容寫法：if(btn2.attachEvent){
 btn2[2].attachEvent();
 }else{
 btn2.addEventListener()；
 }
 2、優點：① 可以給同一節點，添加多個同類型事件；
 ② 提供了可以取消事件綁定的函數；

3、取消DOM2事件綁定：
 注意：如果要取消DOM2的事件綁定，那麼在綁定事件時，處理函數必須要使用有名函數，而不能使用匿名函數。
 btn[2].removeEventListener("click",func2);
btn[2].detachEvent("onclick",func2);

 

 【JS中的事件流】

 1、事件冒泡：當某DOM元素觸發一種事件時，會從當前節點開始，逐級
 往上觸發其祖先節點的同類型事件，直到DOM根節點；

 >>> 什麼情況下會產生事件冒泡？
 ① DOM0模型繫結事件，全部都是冒泡；
 ② IE8之前，使用attachEvent()綁定的事件，全部都是冒泡；
 ③ 其他瀏覽器，使用addEventListener()添加事件，當第三個參數
 省略或者為false時為事件冒泡；

 2、事件捕獲：當某DOM元素觸發一種事件時，會從文檔根節點開始，逐級向下
 觸發其祖先節點的同類型事件，直到該節點自身；

 >>> 什麼情況下會觸發事件捕獲？
 使用addEventListener()添加事件，當第三個參數省略或者為true時為事件捕獲；


3、阻止事件冒泡：
 在IE瀏覽器中，使用e.cancelBubble = true;
 在其他瀏覽器中，使用e.stopPropagation();

 相容所有瀏覽器的寫法：
 function myParagraphEventHandler(e) {
       e = e || window.event;
       if (e.stopPropagation) {
           e.stopPropagation(); //IE以外
       } else {
           e.cancelBubble = true; //IE8之前
       }
  }

 4、取消事件預設行為
 在IE瀏覽器中，使用 e.returnValue = false;
 在其他瀏覽器中，使用 e.preventDefault();

相容所有瀏覽器的寫法：
 function eventHandler(e) {
e = e || window.event;
// 防止預設行為
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}

JS中的DOM操作和事件