在學習Vue源碼的時候，發現有不少DOM原生的東西還不清楚，這里整理一下DOM的元素樹與節點樹

1.節點樹

早期的DOM樹，包含所有的節點內容，甚至包含看不見的換行、空白等字符。

說明：在內存中，只有一棵最完整的節點樹，只不過在節點樹中添加了一些專門指向元素節點的新屬性而已

如一個換行節點與一個包含子節點的div節點對比：

這里的結構是自定義的

1.nodeType

這里就有一個問題：如何判斷一個節點是什么類型的節點呢？

其實每個節點都有一個nodeType屬性，用來表明節點的類型。由12個數值常量來表示，任何節點都必居其一。后面括號里面的數字表示nodeType對應的數值（摘自JavaScript高級程序設計第十章：DOM）

Node.ELEMENT_NODE(1)
Node.ATTRIBUTE_NODE(2)
Node.TEXT_NODE(3)
Node.CDATA_SELECTION_NODE(4)
Node.ENTITY_REFERENCE_NODE(5)
Node.ENTITY_NODE(6)
Node.PROCESSING_INSTRUCTION_NODE(7)
Node.COMMENT_NODE(8)
Node.DOCUMENT_NODE(9)
Node.DOCUMENT_TYPE_NODE(10)
Node.DOCUMENT_FRAGMENT_NODE(11)
Node.NOTATION_NODE(12)

并不是所有的節點類型都受到Web瀏覽器的支持，其實開發中最常用的就是元素節點（1）和文本節點（3）

2.nodeName和nodeValue

要了解節點的具體信息，可以使用nodeName和nodeValue屬性。這兩個屬性的值完全取決于節點的類型。最好需要先檢測一下節點的類型

如果是一個元素，則取得并保存nodeName屬性，該屬性保存的是元素的標簽名，而nodeValue是null

如果不是，則nodeName為null

3.訪問節點

下面列舉幾個常用的父子節點、兄弟節點之間獲取屬性的方法：

1). 父子關系: 
        i. 元素.parentNode  訪問當前元素的父元素
        ii. 元素.childNodes   訪問當前元素的所有直接子元素
        iii. 元素.firstChild   獲得當前元素的所有直接子元素中第一個直接子元素
        iv. 元素.lastChild   獲得當前元素的所有直接子元素中最后一個直接子元素
2). 兄弟關系: 
        i. 元素.nextSibling 元素的下一個兄弟
        ii. 元素.previousSibling 元素的前一個兄弟

4.其他屬性

如果想要查看其他屬性，通過document.querySelector等獲取元素方法獲取到該元素后，打印出來即可看到所有關于該節點的信息

2.元素樹

新版的DOM中，定義了一棵新樹，僅僅包含元素節點對象，排除了不是元素的換行，空白等字符。

這倆棵樹所用到的節點檢索方式不盡相同：

例如：

節點樹獲取所有子元素的方式：

元素.childNodes　　// 獲取的是包含換行等所有節點

元素樹獲取所有子元素的方式：

元素.children     // 獲取的是所有的非換行節點

待續。。。

.tb_button { padding: 1px; cursor: pointer; border-right: 1px solid rgba(139, 139, 139, 1); border-left: 1px solid rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 1) }
.tb_button.hover { borer: 2px outset #def; background-color: rgba(248, 248, 248, 1) !important }
.ws_toolbar { z-index: 100000 }
.ws_toolbar .ws_tb_btn { cursor: pointer; border: 1px solid rgba(85, 85, 85, 1); padding: 3px }
.tb_highlight { background-color: rgba(255, 255, 0, 1) }
.tb_hide { visibility: hidden }
.ws_toolbar img { padding: 2px; margin: 0 }
.tb_button { padding: 1px; cursor: pointer; border-right: 1px solid rgba(139, 139, 139, 1); border-left: 1px solid rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 1) }
.tb_button.hover { borer: 2px outset #def; background-color: rgba(248, 248, 248, 1) !important }
.ws_toolbar { z-index: 100000 }
.ws_toolbar .ws_tb_btn { cursor: pointer; border: 1px solid rgba(85, 85, 85, 1); padding: 3px }
.tb_highlight { background-color: rgba(255, 255, 0, 1) }
.tb_hide { visibility: hidden }
.ws_toolbar img { padding: 2px; margin: 0 }
.tb_button { padding: 1px; cursor: pointer; border-right: 1px solid rgba(139, 139, 139, 1); border-left: 1px solid rgba(255, 255, 255, 1); border-bottom: 1px solid rgba(255, 255, 255, 1) }
.tb_button.hover { borer: 2px outset #def; background-color: rgba(248, 248, 248, 1) !important }
.ws_toolbar { z-index: 100000 }
.ws_toolbar .ws_tb_btn { cursor: pointer; border: 1px solid rgba(85, 85, 85, 1); padding: 3px }
.tb_highlight { background-color: rgba(255, 255, 0, 1) }
.tb_hide { visibility: hidden }
.ws_toolbar img { padding: 2px; margin: 0 }

總結

以上是生活随笔為你收集整理的DOM之元素树与节点树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。