Document，Node，Element，HTMLDocument ，HTMLCollection，HTMLElement，NodeList
作者：zccst
这个问题如果不是基于原生js写组件，可能仍然不明不白，既然遇到了，就整理一下。
一、Document，Node，Element的关系
1，Document对象
Document对象是一棵文档树的根，可为我们提供对文档数据的最初（或最顶层）的访问入口。
用于元素节点、文本节点、注释、处理指令等均无法存在于document之外，document对象同样提供了创建这些对象的方法。Node对象提供了一个ownerDocument属性，此属性可把它们与在其中创建它们的Document关联起来。
属性：documentElement,doctype,nodeType,childNodes,firstChild
方法：createElement(),createTextNode(),getElementByXX(),
2，Node对象-节点对象代表文档树中的一个节点。
Node对象是整个DOM的主要数据类型。
节点对象代表文档树中的一个单独的节点。
节点可以是元素节点、属性节点、文本节点，或者也可以是“节点类型”那一节中所介绍的任何一种节点。
请注意，虽然所有的对象均能继承用于处理父节点和子节点的属性和方法，但是并不是所有的对象都拥有父节点或子节点。例如，文本节点不能拥有子节点，所以向类似的节点添加子节点就会导致DOM错误。
nodeType,nodeName,nodeValue
属性：baseURI,ownerDocument,textConent,childNode,firstChild
方法：appendChild(),cloneNode(),isEqualNode(),hasAttributes(),normalize()
完整版
属性：nodeName/nodeType/nodeValue,previousSibling/nextSibling,childNodes,firstChild/lastChild,parentNode/ownerDocument,baseURI,localName,namespaceURI,prefix,textContent(返回节点及其后代的文本内容),text,xml.
方法：cloneNode(),insertBefore(),appendChild/removeChild/replaceChild,isEqualNode/isSameNode,normailze(合并相邻的text节点并删除空的text节点);
节点编号：节点名称：
1Element#important等于1时表示是Element
2Attribute
3Text#important
4CDATASection
5EntityReference
6Entity
7ProcessingInstrucion
8Comment
9Document#important等于9时表示是Document
10DocumentType
11DocumentFragment
12Notation
(1)ownerDocument：返回节点的根元素（document对象）
(2)NodeList对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或XML文档中的某个元素被删除或添加，列表也会被自动更新。
属性：length可返回节点列表中的节点数目。
方法：item()可返回节点列表中处于指定的索引号的节点。
3，Element对象
Element对象
在HTMLDOM中，Element对象表示HTML元素。
Element对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList对象表示节点列表，比如HTML元素的子节点集合。
元素也可以拥有属性。
属性：attributes,baseURI,tagName,ownerDocument,nodeType,childNodes,firstChild,nextSibling
方法：appendChild()类，isEqualNode()类，getAttribute()类，getElementsByTagName()
与Node不同的是：node没有属性操作相关的方法。都是关于节点的，如appendChild()类，isEqualNode()类
(1)XMLElement对象
Element对象表示XML文档中的元素。元素可包含属性、其他元素或文本。如果元素含有文本，则在文本节点中表示该文本。
由于元素对象也是一种节点，因此它可继承Node对象的属性和方法。
重要事项：文本永远存储在文本节点中。在DOM处理过程中的一个常见的错误是，导航到元素节点，并认为此节点含有文本。不过，即使最简单的元素节点之下也拥有文本节点。举例，在<year>2005</year>中，有一个元素节点（year），同时此节点之下存在一个文本节点，其中含有文本（2005）。
(2)HTMLElement对象
HTMLDOM节点，表示HTML中的一个元素。（nodeType是1）
在HTMLDOM（文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有HTML元素是元素节点
所有HTML属性是属性节点
HTML元素内的文本是文本节点
注释是注释节点
HTMLElement对象继承了Node和Element对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School在HTMLDOM参考手册的各标记参考页中提供了这些方法的信息。
二、HTMLDocument，HTMLCollection，HTMLElement，还有NodeList的关系
HTMLxxxxx在Document的基础上进行HTML扩展，同理，还有XML实现。
HTMLDocument接口提供了对HTML层级的访问。
HTMLDocument接口对DOMDocument接口进行了扩展，定义HTML专用的属性和方法。
很多属性和方法都是HTMLCollection对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于0级DOM。它们已经被Document.getElementsByTagName()所取代，但是仍然常常使用，因为他们很方便。
HTMLCollection是一个接口，表示HTML元素的集合，它提供了可以遍历列表的方法和属性。在JavaScript中，HTMLCollection对象的行为和只读数组一样，可以使用JavaScript的方括号，通过编号或名称索引一个HTMLCollection对象，而不必调用item()方法和namedItem()方法。
HTMLDOM中的HTMLCollection是“活”的；如果基本的文档改变时，那些改变通过所有HTMLCollection对象会立即显示出来。
属性：cssRules只读属性，返回指示列表长度的整数（即集合中的元素数）。
方法：item();返回集合中指定位置的元素（节点）。
namedItem()返回集合中name属性或id属性具有指定值的元素（节点）。
HTMLElement对象表示HTML中的一个元素。（nodeType是1）
HTMLElement对象继承了Node和Element对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School在HTMLDOM参考手册的各标记参考页中提供了这些方法的信息。
NodeList对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或XML文档中的某个元素被删除或添加，列表也会被自动更新。
属性：length可返回节点列表中的节点数目。
方法：item()可返回节点列表中处于指定的索引号的节点。