JavaScript常見DOM節點操作例項
JavaScript常見DOM節點操作示例，建立 ，插入，刪除，複製，查詢。
JavaScript獲取dom節點的方法
獲取上一個節點： previousElementSibling
獲取下一個節點： nextElementSibling
獲取父節點： parentElement
獲取子節點： children
JS常見DOM節點操作示例【建立 ，插入，刪除，複製，查詢】
節點：根據 W3C 的 HTML DOM 標準，HTML 文件中的所有內容都是節點：
整個文件時一個文件節點。
每個HTML元素是元素節點。
HTML元素內的文字是文字節點。
每個HTML屬性是屬性節點。
每個註釋是註釋節點。
所以HTML DOM 將 HTML 文件視作樹結構，這種結構被稱為節點樹。通過 HTML DOM，節點樹中的所有節點都可以通過 JS 進行訪問。所有 HTML 元素（節點）均可被修改。
一、建立節點、追加節點
1、createElement（標籤名）建立一個元素節點（具體的一個元素）。
2、appendChild（節點）追加一個節點。
3、createTextNode（節點文字內容）建立一個文字節點
var oDiv = document.createElement("div");//建立一個div元素，因為是document物件的方法。
var oDivText = document.createTextNode("666");//建立一個文字節點內容是“666”，因為是document物件的方法。
oDiv.appendChild(oDivText);//父級.appendChild(子節點);在div元素中新增“666”
document.body.appendChild(oDiv);//父級.appendChild(子節點);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父級.appendChild(子節點);;document.documentElement是指向<html>元素
二、插入節點
1、appendChild（節點）也是一種插入節點的方式，還可以新增已經存在的元素，會將其元素從原來的位置移到新的位置。
2、insertBefore（a,b）是參照節點，意思是a節點會插入b節點的前面。
var oDiv = document.createElement("div");//建立一個div元素，因為是document物件的方法。
var oDiv1 = document.getElementById("div1");
document.body.insertBefore(oDiv,oDiv1);//在oDiv1節點前插入新建立的元素節點
ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾
三、刪除、移除節點
1、removeChild(節點) 刪除一個節點，用於移除刪除一個引數（節點）。其返回的被移除的節點，被移除的節點仍在文件中，只是文件中已沒有其位置了。
var removeChild = document.body.removeChild(div1);//移除document物件的方法div1
四、替換節點
1、replaceChild(插入的節點，被替換的節點) ，用於替換節點，接受兩個引數，第一引數是要插入的節點，第二個是要被替換的節點。返回的是被替換的節點。
var replaceChild= document.body.replaceChild(div1,div2); //將div1替換div2
五、查詢節點
1、childNodes 包含文字節點和元素節點的子節點。
for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的物件。
//nodeType是節點的型別，利用nodeType來判斷節點型別，再去控制子節點
//nodeType==1 是元素節點
//nodeType==3 是文字節點
if (oList.childNodes[i].nodeType == 1) {//查詢到oList內的元素節點
console.log(oList.childNodes[i]);//在控制器日誌中顯示找到的元素節點
}
}
2、
A、children也可以獲取子節點，而且相容各種瀏覽器。包括IE6-8
B、parentNode：獲取父節點
var oList = document.getElementById('list');//oList是做的ul的物件
var oChild=document.getElementById('child');//oChild是做的ul中的一個li的物件
//通過子節點查詢父節點//parentNode：獲取父節點
console.log(oChild.parentNode);//在控制器日誌中顯示父節點
console.log(oList.children);//在控制器日誌中顯示oList子節點
console.log(children.length)//子節點的個數
3、
A、firstChild ; firstElementChild查詢第一個子節點。此存在瀏覽器相容問題：firstChild是IE相容，firstElementChild是非IE相容。
//查詢第一個子節點的封裝函式
function firstChild(ele) {
if (ele.firstElementChild) {//如果該條件是true則在該瀏覽器（IE或非IE）中相容
return ele.firstElementChild;
} else {
return ele.firstChild;
}
}
firstChild(oList).style.background = 'red';//將獲得的節點的背景變成紅色
B、lastChild ; lastElementChild查詢最後一個子節點。此存在瀏覽器相容問題：lastChild 是IE相容，lastElementChild是非IE相容。
//查詢最後一個子節點的封裝函式
function lastChild(ele) {
if (ele.lastElementChild) {//如果該條件是true則在該瀏覽器（IE或非IE）中相容
return ele.lastElementChild;
} else {
return ele.lastChild;
}
}
lastChild(oList).style.background = 'red';//將獲得的節點的背景變成紅色
C、nextSibling ; nextElementSibling查詢下一個兄弟節點。也是存在相容性問題。
//查詢下一個兄弟節點的封裝函式
function nextSibling(ele) {
if (ele.nextElementSibling) {
return ele.nextElementSibling;
} else {
return ele.nextSibling;
}
}
nextSibling(oMid).style.background = 'red';
D、previousSibling ; previousElementSibling查詢上一個兄弟節點。也是存在相容性問題。
//查詢上一個兄弟節點的封裝函式
function previousSibling(ele) {
if (ele.nextElementSibling) {
return ele.previousElementSibling;
} else {
return ele.previousSibling;
}
}
previousSibling(oMid).style.background = 'red';