一、創建節點
1、createElement()
createElement() 方法創建元素節點。該方法接收一個String類型的參數，表示所創建元素節點的名稱，並返回 Element 對象。
2、createTextNode()
createTextNode() 創建文本節點。該方法接收一個String類型的參數，表示文本節點的文本，並返回一個文本節點對象。
3、createAttribute()
createAttribute()方法用於創建一個指定名稱的屬性，並返回Attr對象屬性。
下面程序展示了上述幾個方法的使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>創建節點</title>
<style type="text/css">
.democlass{
color : red;
}
</style>
</head>
<body>
</body>
<script type="text/javascript">
window.onload = function(){
var div = document.createElement("div"); // 創建div節點
var attr = document.createAttribute("class"); // 創建屬性節點
attr.value = "democlass"; // 設置屬性節點的值
div.setAttributeNode(attr); // 設置div的屬性節點爲所創建的屬性節點
var text = document.createTextNode("這是text節點"); // 創建文本節點
div.appendChild(text); // 文本節點添加爲div的子節點
document.body.appendChild(div); // 添加div爲body的子節點
};
</script>
</html>二、獲取節點
1、使用 getElementById() 方法
該方法通過指定的id來獲取元素節點，返回指定id的元素。
爲了測試獲取節點的方法，先搭建如下HTML DOM結構（下面幾種方法都以這個爲準）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取元素節點</title>
</head>
<body>
<div id="mydiv">
<p id="p1" class="classP">我是p1段落</p>
<p id="p2" class="classP">我是p2段落</p>
<input type="text" name="myinput" value="sean" />
</div>
</body>
</html>JavaScript代碼如下：
var p1 = document.getElementById("p1");
console.log(p1); //<p id="p1" class="classP">
console.log(p1.innerHTML); // 我是p1段落由於id一般都是唯一的，因此返回的元素只有一個。如果仔細觀察，我們也可以發現getElementById()用的單數，而下面的方法用的都是複數。
2、使用getElementsByTagName() 方法
該方法通過標籤名來獲取元素節點，返回所有該標籤名的元素。
var ps = document.getElementsByTagName("p");
console.log(ps); // HTMLCollection[p#p1.classP, p#p2.classP]
for (var i = 0; i < ps.length; i++) {
console.log(ps[i].innerHTML);
}
// 我是p1段落
// 我是p2段落在Firefox瀏覽器測試下，通過標籤名得到的是所有該標籤的元素集合，我們可以通過for循環去遍歷集合中的每一個元素。
3、使用getElementsByName() 方法
該方法通過元素的name屬性來獲取元素節點，返回所有該name屬性的元素節點。
var input = document.getElementsByName("myinput");
console.log(input); // Firefox： NodeList[input 屬性(attribute)值 = "sean"]
console.log(input); // IE： <HtmlCollection length="1">...</HtmlCollection>
console.log(input.length); // 1
console.log(input[0].value); // sean在Firefox瀏覽器下測試，通過name屬性得到的一個NodeList對象，但是在IE下得到的是HTMLCollection集合，這兩者都返回的是 Node 集合與 Node，只是後者多了一個nameItem 方法可用。在我們基本使用中基本上沒有差別。
4、使用getElementsByClassName() 方法
該方法通過元素的類名來獲取元素，同樣返回的是所有該類名的元素節點。
var classp1 = document.getElementsByClassName("classP");
console.log(classp1); //HTMLCollection[p#p1.classP, p#p2.classP]
console.log(classp1.length); // 2
console.log(classp1[0].innerHTML); // 我是p1段落需要注意的是，該方法在IE8及之前的版本都不支持，需要自己實現。
三、節點操作
另外還有一些關於節點的操作列在下面的表格中，並一一進行測試：
| 方法 | 描述 |
|---|---|
| appendChild() | 把新的子節點添加到指定節點 |
| insertBefore() | 在指定的子節點前面插入新的子節點 |
| replaceChild() | 替換子節點 |
| removeChild() | 刪除子節點 |
| cloneNode() | 克隆節點 |
下面通過代碼來演示上述方法的基本用法：
1、appendChild()
appendChild()方法用於向某節點的子節點列表的末尾添加一個節點。添加節點後， childNodes 的新增節點、父節點及以前的最後一個子節點的關係指針都會相應地得到更新。該方法還會返回新增的節點。
首先構建HTML DOM結構：
<!-- HTML -->
<div id="mydiv">
<p id="p1">我是段落p1</p>
<p id="p2">我是段落p2</p>
</div>javascript代碼如下：
//先創建一個新節點
var p3 = document.createElement("p");
p3.innerHTML = "我是段落p3";
var div = document.getElementById("mydiv");
//將p2節點添加到div最後一個子節點
var newnode = div.appendChild(p3);
console.log(newnode===div.lastChild); // true2、insertBefore()
insertBefore()方法用於把節點放在 childNodes 列表中某個特定的位置上，而不是放在末尾。該方法接收兩個參數：需要插入的新節點以及位置參考節點。插入節點後，被插入的節點會變成參照節點的前一個同胞節點（previousSibling），同時被方法返回。如果參照節點是null，則 insertBefore()與 appendChild()執行相同的操作
//先創建一個新節點
var newP = document.createElement("p");
newP.innerHTML = "我是新建的段落";
var div = document.getElementById("mydiv");
//插入後成爲最後一個子節點
var newLastNode = div.insertBefore(newP, null);
console.log(newLastNode===div.lastChild); // true
//插入後成爲第一個子節點
var newFirstNode = div.insertBefore(newP,div.firstChild);
console.log(newFirstNode===div.firstChild); //true
//插入到P2子節點前面
var p2 = document.getElementById("p2");
var newnode = div.insertBefore(newP,p2);
console.log(p2.previousSibling===newnode); //true3、replaceChild()
replaceChild()用於替換子節點，該方法接收兩個參數：要插入的節點和要替換的節點。要替換的節點將由這個方法返回並從文檔樹中被移除，同時由要插入的節點佔據其位置。
//先創建一個新節點
var newP = document.createElement("p");
newP.innerHTML = "我是新建的段落";
var div = document.getElementById("mydiv");
//替換P1元素
var p1 = document.getElementById("p1");
var returnedNode = div.replaceChild(newP, p1);
console.log(p1===returnedNode); //true4、removeChild()
removeChild()方法用於刪除子節點，這個方法接受一個參數，即要移除的節點。被移除的節點將成爲方法的返回值。
var div = document.getElementById("mydiv");
var p1 = document.getElementById("p1");
var removedNode = div.removeChild(p1);
console.log(removedNode); // <p id="p1">注意：前面介紹的四個方法操作的都是某個節點的子節點，也就是說，要使用這幾個方法必須先取得父節點（使用 parentNode 屬性）。另外，並不是所有類型的節點都有子節點，如果在不支持子節點的節點上調用了這些方法，將會導致錯誤發生。
5、cloneNode()
cloneNode()用於克隆節點，該方法接受一個布爾值參數，表示是否執行深複製。在參數爲 true的情況下，執行深複製，也就是複製節點及其整個子節點樹；在參數爲 false 的情況下，執行淺複製，即只複製節點本身。
var div = document.getElementById("mydiv");
var deepList = div.cloneNode(true);
console.log(deepList.childNodes.length); // 5 (IE<9時爲2)
var shollowList = div.cloneNode(false);
console.log(shollowList.childNodes.length); // 0
