在学习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之元素树与节点树