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类型。

转载于:https://www.cnblogs.com/bellhey/articles/7716486.html