JS中的DOM操做和事件

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

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

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

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

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

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


 【查看/設置屬性節點】
 一、查看屬性節點：getAttribute("屬性名");
 二、設置屬性節點：setAttribute("屬性名","新屬性值");

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

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


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

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

 三、 使用.style設置單個屬性，注意屬性名要是用駝峯命名法：
 div.style.backgroundColor = "red";

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


【查看設置文本節點】
 一、 .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("屬性")：刪除屬性。

 

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

 [行對象]
 一、 cells屬性： 返回這一行中的全部單元格，是一個數組格式；
 二、 rowIndex屬性： 返回這一行是表格中的第幾行，從0開始；
 三、 insertCell(index): 在這一行指定位置，插入一個單元格，index從0開始；
 四、 deleteCell(index): 刪除這一行的指定單元格，index從0開始

 [單元格對象]
 一、 cellIndex屬性： 返回這個單元格是本行的第幾個，從0開始；
 二、 innerText innerHTML align className

 

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

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

 三、鍵盤事件
 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事件模型】
 一、內聯模型(行內綁定)：直接將函數名做爲HTML標籤的某個事件屬性的屬性值；
 eg：<button onclick="func()">DOM0內聯模型</button>
 缺點：違反了W3C關於HTML與JavaScript分離的基本原則；

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

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

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

 

 【JS中的事件流】

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

 >>> 什麼狀況下會產生事件冒泡？
 ① DOM0模型綁定事件，所有都是冒泡；
 ② IE8以前，使用attachEvent()綁定的事件，所有都是冒泡；
 ③ 其餘瀏覽器，使用addEventListener()添加事件，當第三個參數
 省略或者爲false時爲事件冒泡；

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

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


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

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

 四、取消事件默認行爲
 在IE瀏覽器中，使用 e.returnValue = false;
 在其餘瀏覽器中，使用 e.preventDefault();

兼容全部瀏覽器的寫法：
 function eventHandler(e) {
e = e || window.event;
// 防止默認行爲
if (e.preventDefault) {
e.preventDefault(); //IE之外
} else {
e.returnValue = false; //IE
}
}