摘要：前言本篇文章以介紹常見的節點知識元素操作方法為目的，其中也對一些比較容易忽略的問題進行簡要說明。此外，還有一些方式可以獲得相關的元素節點。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。

本篇文章以介紹常見的DOM節點知識、DOM元素操作方法為目的，其中也對一些比較容易忽略的問題進行簡要說明。才疏學淺，如有紕漏之處或建議歡迎留下評論。

首先，簡單看看Node節點。有三個屬性個人認為比較需要注意，nodeType、nodeName、nodeValue。

nodeType——節點類型
返回的是一個整數，表面節點的類型。包括元素節點(1)、文本節點(3)、注釋節點(8)等。詳見Node.nodeType

nodeName——節點名稱
返回節點名稱。
元素節點的 nodeName 與標簽名相同
文本節點的 nodeName 始終是 #text
文檔節點的 nodeName 始終是 #document
詳見Node.nodeName

nodeValue——節點值
元素節點的 nodeValue 是 null
文本節點的 nodeValue 是文本本身
詳見Node.nodeValue

這個圖是來自《Javascript高級程序設計》一書中的Node節點間的關系圖譜，比較清晰地介紹了節點之間的關系。

parentNode: 父節點

childNodes: 所有子節點

firstNode: 第一個子節點

lastNode: 最后一個子節點

previousSibling: 前一個兄弟節點

nextSibling: 下一個兄弟節點

特別注意上述屬性獲取的并不只是元素節點，也會包含文本節點等。所以進行操作時需要進行元素類型判斷過濾。
此外，還有一些方式可以獲得相關的元素節點。

Node.parentElement

ParentNode.children(IE6-8返回的元素可能會包含注釋節點)

ParentNode.childElemnetCount

ParentNode.firstElementChild

ParentNode.lastElementChild

NonDocumentTypeChildNode.previousElementSibling

NonDocumentTypeChildNode.nextElementSibling

特別注意：querySelectorAll()與其他方法獲取的DOM元素是不同的，它返回的是靜態的
NodeList 對象，其他返回的是動態的 HTMLCollection 對象。靜態意味著不會隨著DOM結構的變換而改變。舉例如下：

// html

  
1
  
2
  
3
  
4
  
5
  
6


//js
let list = document.getElementById("list"),
    child1 = document.getElementsByTagName("li"),
    child2 = document.querySelectorAll("li")
console.log(child1.length) // 6
console.log(child2.length) // 6
let ele = document.createElement("li")
ele.innerHTML = 7
list.appendChild(ele)
console.log(child1.length) // 7
console.log(child2.length) // 6

所以，在使用getElementsByTagName、getElementsByClassName、getElementsByName方法時要特別注意循環處理DOM節點的情況。

createElement() 創建一個元素節點
createTextNode() 創建一個文本節點
createAttribute() 創建一個屬性節點（用setAttribute方法更加方便）
createDocumentFragment() 創建一個文檔片段（適合在批量操作DOM元素時使用，詳見后面章節的例子）

元素內容的獲取
這里有幾個容易混淆的屬性，innerHTML、outerHTML、innerText、outerText、textContent，都是可以獲取元素內容。區別如下：