Flower Of Life 发热巫女
  1. 1 Flower Of Life 发热巫女
  2. 2 かかってこいよ NakamuraEmi
  3. 3 Warcry mpi
  4. 4 BREAK IN TO BREAK OUT Lyn
  5. 5 Hypocrite Nush
  6. 6 Life Will Change Lyn
  7. 7 Libertus Chen-U
  8. 8 Last Surprise Lyn
  9. 9 One Last You Jen Bird
  10. 10 Time Bomb Veela
2017-01-05 12:23:34

属性和特性

大家都知道,获取一个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时,将返回描述样式信息的简单字符串。

-- EOF --

添加在分类「 前端开发 」下,并被添加 「JavaScript」「HTML」「CSS」 标签。