Node，Document，HTMLDocument，HTMLCollection解析

这里说的是XML的这些对象，而HTML是继承这些对象的，并进行了扩展。如Document对象，

Node对象

它是一个节点对象，代表文档树中的一个节点。是所有节点类型的基类

Node对象是整个DOM的主要类型。节点对象代表文档树中的一个单独的节点

通过childNodes获取NodeList对象（即节点列表）

Node对象的属性和方法主要是操作节点的，获取上下左右的节点，增删改查复制节点。

具体参照 http://www.w3school.com.cn/xmldom/dom_node.asp

js中的应用：

var d = document.getElementsByTagName('div');

var node = d.item(0).childNodes.item(0);

node instanceof Node    //true

d.item(0).childNodes instanceof Node //false
d.item(0).childNodes instanceof NodeList   //true

 

NodeList对象

它代表一个有顺序的节点列表，节点列表可保持自身的更新，如果节点列表或XML文档中的某个元素被删除或添加，列表也会被自动更新。

属性：

length  返回节点列表中的节点数目

方法：

item()  返回节点列表中处于指定的索引节点

 

Document对象（Document类型）

Document对象是一棵文档树的根，可为我们提供对文档数据的最初的访问入口。

包括元素节点、文本节点、注释、处理指令等，document对象同样提供了创建这些对象的方法。

所以Document对象是一个对象。可以使用new操作符。

http://www.w3school.com.cn/xmldom/dom_document.asp

Document类型是继承Node对象的属性和方法，并且新增了属性和方法。

在浏览器中document对象是HTMLDocument（继承Document类型）的一个实例

 

HTMLDocument对象

从上可以看出HTMLDocument继承自Document对象

表示HTML文档树的根，它是一个接口（？有待考察，因为不能new一个HTMLDocument()），提供了对HTML层级的访问。

HTMLDocument接口对DOM Document接口进行了扩展，定义了HTML专用的属性和方法。

很多属性和方法都是HTMLCollection对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他脚本元素的引用。

注意，在 1 级 DOM 中，HTMLDocument 定义了一个名为 getElementById() 的非常有用的方法。在 2 级 DOM 中，该方法已经被转移到了 Document 接口，它现在由 HTMLDocument 继承而不是由它定义了。

 

HTMLCollection对象

它是一个接口，表示HTML元素的集合，它提供了可以遍历列表的方法和属性。

HTML DOM 中的HTMLCollection是“活”的，如果基本的文档改变时，那些改变通过所有HTMLCollection对象会立即显示出来。

下面的每个项目（以及它们指定的属性）都返回HTMLCollection对象实例

Document（images，applets，links，forms，anchors）

form（elements）

map（areas）

select（options）

table（rows，tBodies）

tableSection（rows）

row（cells）

HTMLDocument接口的许多属性都是HTMLCollection对象，它提供了访问诸如表单、图像和链接等文档元素的便捷方式。form.elements和select.options都是HTMLCollection对象，HTMLCollection还提供了遍历Table的各行以及TableRow的各个单元格的一种方便方法。

HTMLCollection 对象是只读的，不能给它添加新元素，即使采用 JavaScript 数组语法也是如此。

HTMLCollection 对象和 NodeList 对象很相似，但前者可能既能用名称索引也能用数字索引。

HTMLCollection对象的属性

cssRules   只读属性，返回指示列表长度的整数（即集合中的元素数）

方法

item()，返回集合中指定位置的元素（节点）

namedItem()，返回集合中name属性或id属性具有指定值的元素（节点）

 

HTML中的实际应用：

通过document实例的方法取到的都是HTMLCollection对象

var d = document.getElementsByTagName('div')

d.__proto__     返回的是HTMLCollection对象

d.item(0).__proto__   返回的是HTMLDivElement对象

d.item(0).childNodes.__proto__    返回的是NodeList对象。也就是childNodes才是NodeList对象。

html中的NodeList还有forEach方法

 

var d = document.getElementsByTagName('div');

var node = d.item(0).childNodes.item(0);

d instanceof HTMLCollection    //true
d是一个HTMLCollection的集合
d instanceof HTMLDocument    //false

Document, HTMLDocument 是顶部节点，所以其他节点都不是Document的实例

d.item(0).childNodes instanceof NodeList   //true
d.item(0).childNodes instanceof HTMLCollection  //false
通过document的方法如document.getElementsByTagName('img')等取到的是HTMLCollection对象，通过childNodes取到的是NodeList对象，这两个都是列表

node instanceof Element   //true  ，node是div元素

node instanceof Node      //true

这里有些是自己的理解，如有不对之处请指出。

 

转载于:https://www.cnblogs.com/wenwenli/p/Node_NodeList_Document_HTMLCollection.html