JS中的DOM操作和事件
【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操作和事件