Attribute和Property异同浅析
《javascript高级程序设计》中很多地方都区分了DOM对象的特性(Attribute)和属性(Property),在英文的语义中这两个单词没多大的差别,但是在Javascript的语义环境中,这两个词还是有很多区分的。以下是笔者为廓清两者的区别所做的一些归纳:
所存储数据的区别
Attribute一般指HTMLDOM对象自带(特有)的属性,例如id,class,title等,如下:
Property就是DOM为了方便JS操作附加的一些编程接口,例如childNodes,lastChild等,如下:
“两面派”的Attribute
HTMLDOM标准自带的Attribute,会被转为Property添加到DOM对象上,可以和Property一样取值和赋值。但是自定义的Attribute,就不会被转,例如:
这里有HTMLDOM标准自带的id特性和自定义的data1特性,只有id特性会被转为Property,见如下图
有些Attribute例如class
,由于在JS中属于关键字会被转为PropertyclassName
!
存取数据结构差异
Attribute取值
DOM对象的attributes属性会返回一个NamedNodeMap
类数组,存储着都是Attr类型的成员,它们包含着DOM对象的所有特性信息(包括自定义的)。为了方便操作,js提供了setAttribute
和getAttribute
的接口供大家操作Attribute。
getAttribute这个方法的浏览器兼容性有问题,在有些浏览器上面可能会获取属性Property的值,使用之前需要做兼容性测试:
navi.className='test';
navi.getAttribute('className') === navi.className ? false : true //返回false表示兼容性有问题,true表示正常
Attribute赋值
通过setAttribute给DOM对象的Attribute(标准和自定义的都可以)赋值,只能附字符串类型的值,赋值之后会立即反映到DOM元素上,若是标准Attribute还会被转为property。
Property取值
通过.
语法取DOM对象属性值。注意class特性被转为Property时,会被转为className
,需要通过.className
去获取。
Property赋值
同样通过.
语法设置DOM对象属性值,这里可以赋任何类型的值,不像Attribute只能赋字符串类型的值。属性赋值在IE6中如果形成循环引用,会造成内存泄漏。
内联样式和事件绑定
同id, class, title一样,style和onclick也具有两面性。但是不同之处在于,用getAttribute获取的是一个字符串,而用.
语法获取的是个对象。如下:
由于Attribute和Property的存储的数据结构不一样,导致返回的结果一个字符串类型一个是Object类型。