属性和特性

大家都知道，获取一个DOM元素的样式通过elem.style或者elem.getAttribute('style')都能实现。那么这两者有什么区别呢？

从object说起

object是什么？

在JavaScript中把对象定义为：无序属性的集合。即对象是一组没有特定顺序的值，对象中每个属性名都映射到一个值。

object属性的分类

对象中的属性多种多样，一般便于理解可将其分为数据属性和访问器属性。数据属性一般用于存值，访问器属性一般用于获取或设置属性的操作。

object属性的特性

为了描述对象属性的各种特征，我们定义了特性这个概念。特性不同于属性，属性是为了描述对象，而特性是为了描述属性。

数据属性都是可以直接定义的，有4个描述其行为的特性。在JS中不能直接访问属性的特性，所以一般放在两组方括号中，如下：

• [[Configurable]]:默认值为true,表示能否通过delete操作符删除属性，能否修改属性的特性
• [[Enumerable]]:默认值为true,表示是否可枚举，即是否能通过for-in循环返回该属性
• [[Writable]]:默认值为true,表示能否修改属性的值
• [[Value]]:默认值为undefined，这个值即为属性值，可读取或写入

访问器属性不包含数据值，并且不可以直接定义，必须用Object.defineProperty()定义，其特性如下:

• [[Configurable]]:同数据属性
• [[Enumerable]]:同数据属性
• [[Get]]:在读取属性时调用的函数，默认值为undefined
• [[Set]]:在写入属性时调用的函数，默认值为undefined

DOM对象

我们知道DOM的实现是把一个HTML文档映射为一颗DOM树，而DOM树上的每个节点就是我们以上谈到的一个JavaScript对象，所以我们可以直接通过elem.style的方式访问对象的属性。那么elem.getAttribute('style')获取的是什么呢？DOM树除了元素节点外，还存在描述元素节点的特性节点，特性节点也和上述的特性类似不可以直接访问，因此可以看作专注于描述HTML中的元素节点的特性。

虽然属性和特性可以说属于不同体系下的特征，但由于两者都用于描述同一对象，所以注定了这两者既有联系又有不同。

DOM中特性与属性的根本区别

• 特性操作为HTML的文本操作，用于获取和设置HTML文档中的特性节点，这些节点内容都是字符串形式并且特性名称对大小写不敏感
• 属性操作为JavaScript操作，用于获取和设置DOM对象的原生属性，可以是字符串，对象，函数等。这些属性可能会影响特性的值

特性与属性的同步性

• 一些常用的特性已经被作为常用属性附加到DOM对象上，两者是相互同步的，比如id,title等。
• 同步的特性中也存在一些命名异常的属性。比如class特性会同步到className属性
• 还存在一些单向同步的特性，例如input的value特性会单向同步到input.value。而如果先设置input.value的值则无法通过特性访问。

特殊的同步——style

• 当通过属性来获取style时，将返回一个名为CSSStyleDeclaration的对象。这个对象包含着所有样式信息，和window.getComputedStyle()返回的对象相同，并且提供了一系列方法来操作。可以通过这个对象来用JS动态控制CSS样式。
• 当通过特性获取style时，将返回描述样式信息的简单字符串。