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

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

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

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

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

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

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

parentNode: 父節(jié)點

childNodes: 所有子節(jié)點

firstNode: 第一個子節(jié)點

lastNode: 最后一個子節(jié)點

previousSibling: 前一個兄弟節(jié)點

nextSibling: 下一個兄弟節(jié)點

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

Node.parentElement

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

ParentNode.childElemnetCount

ParentNode.firstElementChild

ParentNode.lastElementChild

NonDocumentTypeChildNode.previousElementSibling

NonDocumentTypeChildNode.nextElementSibling

特別注意：querySelectorAll()與其他方法獲取的DOM元素是不同的，它返回的是靜態(tài)的
NodeList 對象，其他返回的是動態(tài)的 HTMLCollection 對象。靜態(tài)意味著不會隨著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方法時要特別注意循環(huán)處理DOM節(jié)點的情況。

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

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