上一篇文章的案例中有關於節點的知識點，我沒有提，這次講一下，其實節點還挺有意思的。。。

一、節點屬性

1、節點型別：nodeType
2、節點名：nodeName，對於元素節點來說，nodeName結果為大寫的標籤名，例如DIV
3、節點值：nodeValue，對於元素節點來說，nodeValue為null

二、節點訪問關係

1、上下級

① parentNode，父節點
② childNodes，獲取所有子節點，會獲取到文字節點
③ children，獲取所有元素子節點(子元素)
④ firstChild，獲取第一個子節點 -，會獲取到文字節點
⑤ firstElementChild，獲取第一個元素子節點，相容性問題 ie9以下不支援
⑥ lastChild - 獲取最後一個子節點，會獲取到文字節點
⑦ lastElementChild，獲取最後一個元素子節點，相容性問題

2、同級

① nextSibling，獲取下一個同級節點 ， 會獲取到文字節點
② nextElementSibling，獲取下一個同級元素節點，相容性問題
③ previousSibling，獲取上一個同級節點，會獲取到文字節點
④ previousElementSibling，獲取上一個同級元素節點，相容性問題

三、移動節點

1、appendChild() - 追加子節點

① 功能：將引數移動到呼叫的節點中所有子節點的最後
② 引數：要移動的節點

2、insertBefore() - 插入子節點

① 功能：將引數1插入到引數2參考節點的前面
② 引數1：要移動的節點
③ 引數2：參考節點，參考節點必須是呼叫節點的子節點

3、cloneNode() - 克隆節點

① 引數：布林型別，true表示深拷貝，拷貝標籤和內部內容，預設為false，表示淺拷貝，只拷貝標籤本身
② 要克隆的元素和內部元素不能設定id
③ 克隆只是結構操作，無法克隆事件等內容

四、動態建立元素

1、document.write();

宣告的內容會被新增到body的最後位置，如果在頁面載入後使用document.write()，此時頁面中所有內容都會被覆蓋。
頁面在執行後，內部的所有標籤會被自動生成，這個過程我們稱為一次文件流。如果在頁面載入後再次使用document.write()，會開啟一個新的文件流，這時上一次文件流的內容會被覆蓋。

2、innerHTML

① 好處：
可以指定位置進行元素的建立操作。
不會對頁面中的所有內容造成覆蓋。
② 缺點：
會覆蓋當前元素內的內容。
使用+=方式雖然可以避免結構的覆蓋，但實際上內部的新舊標籤不是同一個了，事件等內容均不存在了。

3、document.createElement();

① 用於進行元素節點的建立操作
② 引數：字串形式的標籤名
③ 特點：使用此方式建立的元素預設不在頁面中顯示，如果需要顯示，需要自己進行移動節點操作。
④ 優點：效能好
⑤ 缺點：如果使用document.createElement()進行復雜結構建立時較為繁瑣

4、動態建立元素小結

① 複雜結構使用innerHTML
② 其他情況下使用document.createElement()
③ 如果要進行元素建立的元素box中已經具有了其他元素，這時必須使用document.createElement()

5、移除元素

removeChild(); 移除子元素
① 引數：要移除的元素，必須是呼叫元素的子元素
② 返回值：被移除的元素