前面的话
元素节点Element非常常用,是DOM文档树的主要节点;元素节点是HTML标签元素的DOM化结果。元素节点主要提供了对元素标签名、子节点及特性的访问,本文将详细介绍元素节点的主要内容
特征
元素节点的三个node属性——nodeType、nodeName、nodeValue分别是1、元素的大写标签名和null,其父节点parentNode指向包含该元素节点的元素节点Element或文档节点Document
[注意]要访问元素的标签名可以使用nodeName,也可以使用tagName属性,这两个属性会返回相同的值
123
子节点
元素可以有任意数目的子节点和后代节点,因为元素可以是其他元素的子节点。元素的childNodes属性中包含了它的所有子节点,这些子节点可能是元素、、、处理指令节点
兼容
可以通过检查nodeType属性来只获取元素节点
特性操作
每个元素都有一个或多个特性,这些特性的用途是给出相应元素或其内容的附加信息。操作特性的DOM方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个,可以针对任何特性使用,包括那些以HTMLElement类型属性的形式定义的特性
hasAttribute()
hasAttribute()方法返回一个布尔值,表示当前元素节点是否包含指定属性
[注意]IE7-浏览器不支持hasAttribute()方法
getAttribute()
getAttribute()方法用于取得特性的值,如果给定名称的特性不存在或无参数则返回null
[注意]元素特性和对象属性并不相同,二者的区别详细情况
setAttribute()
setAttribute()方法接受两个参数:要设置的特性名和值,如果已经存在,则替换现有的值。如果特性不存在,setAttribute()则创建该属性并设置相应的值。该方法无返回值
123
[注意]通过setAttrbute()方法设置的特性名会统一转换成小写形式
123
bug
IE7-浏览器设置class、style、for、cellspacing、cellpadding、tabindex、readonly、maxlength、rowspan、colspan、usemap、frameborder、contenteditable这13个特性没有任何效果
123
可以利用IE7-浏览器下对象属性和元素特性的来设置
123
removeAttribute()
removeAttribute()方法用于彻底删除元素的特性,这个方法不仅会彻底删除元素的特性值,还会删除元素特性。该方法无返回值
attributes属性
元素节点Element是唯一一个使用attributes属性的DOM节点类型。attributes属性中包含一个NamedNodeMap,与NodeList类似,也是一个动态的集合。元素的每一个特性都由一个Attr节点表示,每个节点都保存在NamedNodeMap对象中,每个节点的nodeName就是特性的名称,节点的nodeValue就是特性的值
attributes属性包含以下四个方法
getNamedItem(name)
getNamedItem(name)方法返回nodeName属性等于name的节点
removeNamedItem(name)
removeNamedItem(name)方法从列表中移除nodeName属性等于name的节点,并返回该节点
setNamedItem(node)
setNamedItem(node)方法向列表中添加节点,该方法无返回值
item(pos)
item(pos)方法返回位于数字pos位置处的节点,也可以用方括号法[]简写
遍历
attributes属性主要用于特性遍历。在需要将DOM结构序列化为HTML字符串时,多数都会涉及遍历元素特性
function outputAttributes(element){ var pairs = new Array(),attrName,attrValue,i,len; for(i = 0,len=element.attributes.length;i
针对attributes对象中的特性,不同浏览器返回的顺序不同
由上面结果看出,IE7-浏览器会返回HTML元素中所有可能的特性,包括没有指定的特性
specified
可以利用特性节点的specified属性来解决IE7-浏览器的这个问题。如果specified属性的值为true,则意味着该属性被设置过。在IE中,所有未设置过的特性的该属性值都是false。而在其他浏览器中,任何特性节点的specified值始终为true
最后
如果从头到尾看完这篇博文,会发现全篇篇幅最多的内容是特性的设置。特性设置不是应该在特性节点上吗?特性节点可以设置,但是使用元素节点来操作特性更方便。元素节点的内容还包括元素节点的操作,但是由于在中已经详细介绍过,就不再赘述
下一篇将介绍特性节点
欢迎交流