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节点);

节点编号： 节点名称：
1 Element               #important 等于1时表示是Element
2 Attribute
3 Text                  #important
4 CDATA Section
5 Entity Reference
6 Entity
7 Processing Instrucion
8 Comment
9 Document              #important 等于9时表示是Document
10 Document Type
11 Document Fragment
12 Notation


(1)ownerDocument：返回节点的根元素（document对象）

(2)NodeList 对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
属性：length  可返回节点列表中的节点数目。
方法：item() 可返回节点列表中处于指定的索引号的节点。



3，Element 对象
Element 对象
在 HTML DOM 中，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 对象
HTML DOM 节点，表示 HTML 中的一个元素。（nodeType是1）
在 HTML DOM （文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

HTMLElement 对象继承了 Node 和 Element 对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School 在 HTML DOM 参考手册的各标记参考页中提供了这些方法的信息。




二、HTMLDocument ，HTMLCollection，HTMLElement，还有NodeList的关系

HTMLxxxxx在Document的基础上进行HTML扩展，同理，还有XML实现。

HTMLDocument 接口提供了对 HTML 层级的访问。
HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。
很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。


HTMLCollection 是一个接口，表示 HTML 元素的集合，它提供了可以遍历列表的方法和属性。在 JavaScript 中，HTMLCollection 对象的行为和只读数组一样，可以使用 JavaScript 的方括号，通过编号或名称索引一个 HTMLCollection 对象，而不必调用 item() 方法和 namedItem() 方法。
HTML DOM 中的 HTMLCollection 是“活”的；如果基本的文档改变时，那些改变通过所有 HTMLCollection 对象会立即显示出来。
属性：cssRules 只读属性，返回指示列表长度的整数（即集合中的元素数）。
方法：item(); 返回集合中指定位置的元素（节点）。
      namedItem() 返回集合中 name 属性或 id 属性具有指定值的元素（节点）。



HTMLElement对象 表示 HTML 中的一个元素。（nodeType是1）
HTMLElement 对象继承了 Node 和 Element 对象的标准方法。某些类型的元素实现了特定于标记的方法，W3School 在 HTML DOM 参考手册的各标记参考页中提供了这些方法的信息。



NodeList 对象代表一个有顺序的节点列表。
我们可通过节点列表中的节点索引号来访问列表中的节点（索引号由0开始）。
节点列表可保持其自身的更新。如果节点列表或 XML 文档中的某个元素被删除或添加，列表也会被自动更新。
属性：length  可返回节点列表中的节点数目。
方法：item() 可返回节点列表中处于指定的索引号的节点。