【js学习笔记-082】-----文档结构和遍历

文档结构和遍历

作为节点树的文档

Document对象，它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要的属性：

l  parentNode

节点的你节点，document对象应该是null

l  childNodes

只读的类数组对象，它是该节点的子节点的实时表示

l  firstChild/lastChild

该节点中的第一个和最后一个，如果该节点没有子节点则为null

l  nextSibling/previousSibling

该节点的兄弟节点中的前一个和下一个。节点的顺序映了它们在文档中出现的顺序。这两个属性节点之前以双向链表的形式连接起来。

l  nodeType

表示结点类型：

Ø  9：Document

Ø  1：Element节点

Ø  3：Text节点

Ø  8：Comment节点

Ø  11：DocumentFragment节点

l  nodeValue

Text节点或Comment节点的文本内容

l  nodeName

元素的标签名，以大写形式表示。

 

做为元素树的文档

当主要的兴趣点集中在文档的元素上而非它们之前的文本上时，我们可以使用另一个更有用的API。它将文档看做是Element对象树，忽略部分文档:Text和Comment节点

 基于元素的文档遍历API的第二部分是Element属性，后者类似Node对象的子属性和兄弟属性：

firstElementChild，lastElementChild

//类似firstChild和lastChild，但只代表Element

 

nextElementSibling,previousElementSibling

//类似nextSibling和previousSibling只代表兄弟Element

 

childElementCount

//子元素的数量。返回的值和children.length值相等

 

属性

HTML属性作为Element的属性

HTML属性名不区分大小写，但js属性名刚大小写敏感。从HTML属性名转换到javascript属性名应该采用小写。但如果属性名包含不止一个单词，则将除了第一个单词以外的单词首字母大写。有些html属性名在javascript中是保留字。对于这些属性，一般的规则是为属性名加前缀“html”。例如html的for属性在js中变成htmlFor属性。class属性变成className。任何style属性值是CSSStyleDeclaration对象。而不是字符串。

注意，这个基于属性的Api用来获取和设置属性值，但没定义任何从元素中删除属性的方法。delete操作符也无法完成此目的。

获取和设置非标准HTML属性

HTMLElement和其子类定义了一些属性，它们对应于元素的标准HTML属性。Element类型还定义了getAttribute() 和setAttribute()方法来查询和设置非标准的HTML属性，也可用来查询和设置XML文档的属性。

var image= document.images[0];

var width = parseInt(image.getAttribute(“WIDTH”);

var image.setAttribute(“class”,”thumbnail”);

上述代码给出了这些方法和前面的基于属性的API之间两个重要的区别。首先，属性值都被看做是字符串。getAttribute()不返回数值、布尔值或对象。其次，方法使用标准属性名，甚至当这些名称为js保留字也不例外。对HTML元素来说，属性名不区分大小写。

hasAttribute()和removeAttribute()用来检测命名属性存在和完全删除属性