这里说的是XML的这些对象,而HTML是继承这些对象的,并进行了扩展。如Document对象,
Node对象
它是一个节点对象,代表文档树中的一个节点。是所有节点类型的基类
Node对象是整个DOM的主要类型。节点对象代表文档树中的一个单独的节点
通过childNodes获取NodeList对象(即节点列表)
Node对象的属性和方法主要是操作节点的,获取上下左右的节点,增删改查复制节点。
具体参照
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操作符。
Document类型是继承Node对象的属性和方法,并且新增了属性和方法。
在浏览器中document对象是HTMLDocument(继承Document类型)的一个实例
HTMLDocument对象
从上可以看出HTMLDocument继承自Document对象
表示HTML文档树的根,它是一个接口(?有待考察,因为不能new一个HTMLDocument()),提供了对HTML层级的访问。
HTMLDocument接口对DOM Document接口进行了扩展,定义了HTML专用的属性和方法。
很多属性和方法都是HTMLCollection对象(实际上是可以用数组或名称索引的只读数组),其中保存了对锚、表单、链接以及其他脚本元素的引用。
注意,在 1 级 DOM 中,HTMLDocument 定义了一个名为 的非常有用的方法。在 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 对象和 很相似,但前者可能既能用名称索引也能用数字索引。
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 //falseDocument, 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
这里有些是自己的理解,如有不对之处请指出。