JS中的DOM— —節點以及操作
DOM操作在JS中可以說是非常常見了吧，很多網頁的小功能的實現，比如一些元素的增刪操作等都可以用JS來實現。那麽在DOM中我們需要知道些什麽才能完成一些功能的實現呢？今天這篇文章就先簡單的帶大家入一下JS中DOM操作的門吧！！
一、DOM樹的節點
1、 DOM節點分為三大類: 元素節點(標簽節點)、屬性節點和文本節點。
屬性節點和文本節點都屬於元素節點的子節點。 因此操作時，需先選中元素節點，再修改屬性和文本。
【查看元素節點】
1、 使用getElement系列方法：
具體的HTML代碼如下圖：
//通過ID來查看元素屬性
var li = document.getElementById("first");
註意事項：
① ID不能重名，如果ID重復，只能取到第一個。
② 獲取元素節點時，必須等到DOM樹加載完成後才能獲取。
兩種處理方式： a.將JS寫在文檔最後；
b.將代碼寫入window.onload函數中；
③ 通過getElements系列取到的為數組格式，操作時必須取到其中的每一個元素，才能進行操作，而不能直接對數組進行操作。
document.getElementsByTagName("li")[0].click = function(){}
④ 這一系列方法，也可以先選中一個DOM節點，在從選中的DOM節點中，選擇需要的節點：
document.getElementById("div1").getElementsByTagName("li");
【通過querySelector系列方法】
① 傳入一個選擇器名稱，返回第一個找到的元素。 通常用於查找ID：
var dq1 = document.querySelector("#id");
② 傳入一個選擇器名稱，返回所有找到的元素，無論找到幾個，都返回數組格式。這種方法比較全能，不管什麽屬性都可以準確地找到。
var dqs1 = document.querySelectorAll("#div1 li");
【查看\設置屬性節點】
1、 查看屬性節點：.getAttribute("屬性名");
2、 設置屬性節點：.setAttribute("屬性名","屬性值");
註意事項：.setAttribute() 在老版本IE中會存在兼容性問題，可以使用.符號代替。
【JS修改CSS的多種方式】
1、 使用setAttribute設置class和style。
document.getElementById("first").setAttribute("class","class1");
document.getElementById("first").setAttribute("style","color:red;");
2、使用.className添加一個class選擇器。
document.getElementById("first").className = "class1";
3、 使用.style.樣式 直接修改單個樣式。 註意樣式名必須使用駝峰命名法。
document.getElementById("first").style.fontSize = "18px";
4、 使用.style 或 .style.cssText 添加一串行級樣式：
// IE不兼容
document.getElementById("first").style = "color:red;";
//所有瀏覽器兼容
document.getElementById("first").style.cssText = "color:red;";
【查看/設置文本節點】
1、.innerHTML: 取到或設置一個節點中的HTML代碼。
2、.innerText: 取到或設置一個節點中的文本，不能設置HTML代碼。
二、層次節點操作
1. .childNodes： 獲取當前節點的所有子節點（包括元素節點和文本節點）。
.children： 獲取當前節點的所有元素子節點（不包含文本節點）。
2. .parentNode: 獲取當前節點的父節點。
3. .firstChild： 獲取第一個子節點，包括回車等文本節點；
.firstElementChild： 獲取第一個元素節點。 不含文本節點；
.lastChild： 獲取最後一個子節點，包括回車等文本節點；
.lastElementChild： 獲取最後一個子節點，不含文本節點；
4. .previousSibling： 獲取當前節點的前一個兄弟節點，包括文本節點；
.previousElementSibling： 獲取當前節點的前一個元素兄弟節點；
.nextSibling：獲取當前節點的後一個兄弟節點，包括文本節點；
.nextElementSibling：獲取當前節點的後一個元素兄弟節點；
5. .attributes: 獲取當前節點的所有屬性節點。 返回數組格式。
【創建並新增節點】
1. document.createElement("標簽名")： 創建一個新節點，並將創建的新節點返回。
需要配合.setAttribute()為新節點設置屬性。
2. 父節點.insertBefore(新節點,目標節點)： 在父節點中，將新節點插入到目標節點之前。
父節點.appendChild(新節點)： 在父節點的內部最後，插入一個新節點。
3. 源節點.cloneNode(true)： 克隆一個節點。
傳入true表示克隆源節點以及源節點的所有子節點；
傳入false或不傳，表示只克隆當前節點，而不克隆子節點。
【刪除、替換節點】
1. 父節點.removeChild(子節點)： 從父節點中，刪除指定子節點。
2. 父節點.replaceChild(新節點,老節點)： 從父節點中，用新節點替換老節點。
JS中的DOM— —節點以及操作