博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Node,Document,HTMLDocument,HTMLCollection解析
阅读量:5277 次
发布时间:2019-06-14

本文共 2693 字,大约阅读时间需要 8 分钟。

这里说的是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    //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

你可能感兴趣的文章
MySQL--数据插入
查看>>
重新学习python系列(二)? WTF?
查看>>
shell脚本统计文件中单词的个数
查看>>
SPCE061A学习笔记
查看>>
sql 函数
查看>>
hdu 2807 The Shortest Path 矩阵
查看>>
熟悉项目需求,要知道产品增删修改了哪些内容,才会更快更准确的在该项目入手。...
查看>>
JavaScript 变量
查看>>
java实用类
查看>>
smarty模板自定义变量
查看>>
研究称90%的癌症由非健康生活习惯导致
查看>>
命令行启动Win7系统操作部分功能
查看>>
排序sort (一)
查看>>
Parrot虚拟机
查看>>
Teamcenter10 step-by-step installation in Linux env-Oracle Server Patch
查看>>
Struts2学习(三)
查看>>
Callable和Runnable和FutureTask
查看>>
GitHub 多人协作开发 三种方式:
查看>>
文本域添加编辑器
查看>>
Yum安装MySQL以及相关目录路径和修改目录
查看>>