Javascript高階程式設計學習筆記（35）—— DOM（1）節點
DOM
JS由三部分組成
1、BOM
2、DOM
3、ECMAScript
ES和BOM在前面的文章已經介紹過了
今天開始JS組成的最後一部分DOM（文件物件模型）
我們知道，JS中的這三個部分實際上就是三種規範，只要是實現了這三種規範，那麼這個語言就可以說是JS
DOM（文件物件模型）也是一種規範，是針對HTML和XML文件的API（應用程式程式設計介面）
DOM的功能主要是用於將文件解析為一個層次化的節點樹，通過DOM提供的API讓開發人員能夠操作這棵節點樹
用於對文件內容進行操作（增、刪、改、查）
節點層次
DOM將文件描繪為一個層次化的文件樹，那麼DOM有哪些層次呢？
1、文件節點（每個文件的根節點，該節點只有一個子節點——文件元素）
2、文件元素（文件中所有的元素都包含在文件元素中，html頁面中文件元素始終是<html>元素）
Node型別
在介紹節點之前需要先介紹一下Node型別
該型別是由DOM1規範中所規定的，用於所有節點型別的實現
JS中所有的節點型別都繼承自Node型別
所以所有的節點都共享著相同的基本屬性和方法
1、nodeType屬性（該屬性用於表示節點的型別，用12個數值常量來表示）
- Node.ELEMENT_NODE(1) //元素節點
- Node.ATTRIBUTE_NODE(2) //屬性節點
- Node.TEXT_NODE(3) //文字節點
- Node.CDATA_SECTION_NODE(4) //CDATA區域（XML）
- Node.ENTITY_REFERENCE_NODE(5) //實體指向節點
- Node.ENTITY_NODE(6) //實體節點
- Node.PROCESSING_INTRUCTION_NODE(7) //處理指令節點
- Node.COMMENT_NODE(8) //註釋節點
- Node.DOCUMENT_NODE(9) //文件節點
- Node.DOCUMENT_TYPE_NODE(10) //文件型別節點
- Node.DOCUMENT_FRAGMENT_NODE(11) //文件片段節點
- Node.NOTATION_NODE(12) //標記節點
通過上述的常量可以判斷文件中的節點的型別
1 if(節點.nodeType === Node.TEXT_NODE){ 2 // 程式碼 3 }
PS：IE中由於並沒有暴露出Node物件，所以為了保證瀏覽器的相容性最好使用數值常量來進行判斷
要注意的是在WEB瀏覽器中瀏覽器不一定實現了上述的某類物件
因為這只是規範，至於瀏覽器廠商有沒有按照規範實現，這就是各個瀏覽器的問題了
2、nodeName屬性
節點名稱，取決於節點型別
對於元素節點該值為元素的標籤名
3、nodeValue屬性
節點值，取決於節點型別
對於元素節點該值始終為 null
4、childNodes屬性
該屬性儲存著一個 NodeList 物件
NodeList是一種類陣列物件，用於儲存一組有序的節點
該物件是動態的，不是靜態的（即文件結構的變化會動態地反應在該陣列中）
訪問其中的某個節點可以使用與陣列一致的方括號，也可以使用 item(索引值) 的方式獲取其中的節點
5、firstChild屬性
指向childNodes的第一個節點
6、lastChild屬性
指向ChildNodes的最後一個節點
7、parentNode屬性
該屬性指向當前節點的父節點
8、previousSibling屬性
指向當前節點的前一個同級節點
9、nextSibling屬性
指向當前節點的後一個同級節點
10.ownerDocument屬性
指向當前節點所屬的文件節點，每個節點只能屬於一個文件節點
節點方法
1、hasChildNodes方法
用於判斷當前節點是否存在子節點，返回一個布林值
2、appendChild方法
用於給當前節點childNodes列表末尾新增子節點，引數需傳入一個節點物件
若傳入的節點物件已存在於當前的文件中，則將這個節點從原來的位置移到現在的位置
3、insertBefore方法
該方法需要傳入兩個引數
1.要插入的節點
2.要插入到childNodes列表中哪個節點的前面
若第二個引數為null則插入到最後，與appendChild所執行的操作一致
4、replaceChild方法
依舊需要兩個引數
1.用於替換的節點
2.被替換的節點
該方法返回被替換的節點
5、removeChild方法
傳入需要移除的節點（childNodes中）
返回被移除的節點
PS：上述5個方法對於沒有子節點的節點會報錯
6、cloneNode方法
複製當前節點，傳入一個布林值
true 深複製，複製當前節點及其子節點
false淺複製，僅複製當前節點本身
7、normalize方法
用於整理當前節點的子節點
即由於文件操作很可能會出現一些，不符合邏輯的結構該方法就用於整理這些結構
如：空文字節點、兩個相鄰文字節點
對於上述例子，空文字節點會被移除，兩個相鄰的文字節點會合併為一個
對於Node型別我們雖然可以訪問但是並不能看到詳情
說明Node型別是JS的內建物件
但是我們可以通過Object.keys來看到這些屬性
而後面我們提到的屬性、方法樓主沒找到方法把它們遍歷出來
如果有知道的小夥伴可以留言告知，感激不盡~~~