attribute 和 property 的区别
attributes
属于 HTML。为了易于区别,我们译为特性
。
properties
属于 DOM,译为属性
,而在 JavaScript 中我们操作 HTML 时使用的就是 DOM。
Attribute(特性)
- attributes 由 HTML 来定义,像是id、title、class等等。
比如这样一段html代码,input 元素就有三个 attribute。
1 | <input type='text' id='txt' a=b /> |
HTML 元素映射到 DOM 是 HTMLElement 类型的节点对象,HTMLElement 类型的节点对象有一个 attributes 属性,这个属性本身也是一个对象,HTML 元素的所有 attribute 都包含在这个对象里面。
attributes 对象特点:
- 以动态集合的方式存在(NamedNodeMap)
- 只能是字符串
- 大小写不敏感
attributes 对象本身也有一些操作 HTML 的 attribute 的方法,但是实际上,这个对象极少使用。一般都是通过 HTMlElement 节点对象的几个方法来操作 HTML 的 attribute。
1 | elem.hasAttribute(name) // 检查 attribute 是否存在 |
Property(属性)
在JS里面我们使用 DOM 来操作 HTML 元素,DOM 为了操作 HTML ,将 HTML 中的元素描绘成一个个的节点,HTML 元素的每一个公认的(非自定义的) attribute
映射为节点对象上一个个的 property
。
properties 特点:
- 可以是任何的数据类型,
- 对大小写敏感,
- js 中自定义的 property 不会出现在 html 代码中,只存在 js 中
例:
1 | <div id="myDiv" class="bd" title="Body text"></div> |
在 HTML 中,div
是一个元素,id、class、title
是它的attributes
(特性);
在 DOM 中,div
元素为HTMLElement
类型的节点对象,id、className、title
是它的properties
(属性)。
有些 HTML 特性是 JavaScript 的保留字,转为 property 时,必须改名。主要是以下两个。
- for 属性改为 htmlFor
- class 属性改为 className
dataset 属性
上面我们讲了,HTML 元素的每一个 公认的(非自定义的) attribute 映射为节点对象上一个个的 property 。那么自定义的怎么办?
有时,需要在HTML元素上附加数据,供JavaScript脚本使用。一种解决方法是自定义特性。
1 | <div id="mydiv" foo="bar"> |
上面代码为 div 元素自定义了 foo 特性,然后可以用getAttribute()
和setAttribute()
读写这个特性。这种方法虽然可以达到目的,但是会使得HTML元素的属性不符合标准,导致网页的HTML代码通不过校验。
更好的解决方法是,使用标准提供的data-*
特性。
1 | <div id="mydiv" data-foo="bar"> |
HTMLElement 节点对象有一个 dataset
属性,它本身也是一个对象,可以用来操作 HTML 元素的data-*
特性。
1 | var n = document.getElementById('mydiv'); |
注意,data-后面的属性名有限制,只能包含字母、数字、连词线(
-
)、点(.
)、冒号(:
)和下划线(_
)。而且,属性名不应该使用 A 到 Z 的大写字母,比如不能有data-helloWorld
这样的属性名,而要写成data-hello-world
。
转成 dataset 的键名时,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。反过来,dataset 的键名转成属性名时,所有大写字母都会被转成连词线
+
该字母的小写形式,其他字符不变。比如,dataset.helloWorld
会转成data-hello-world
。
相通之处
-
公认的(非自定义的)attribute,如id、class、titile等,都会有对应的 property 映射。
-
公认的(非自定义的) property 或 attribute 的变化多数是联动的。
attribute 更改时,相应的 property 将自动更新,反之亦然。
1 | // HTML |
但是有例外,带有默认值的 attribute 不随 property 变化而变化。
1 | // HTML |
不同之处
有几类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()
返回的值并不相同。如href,src,value,style,onclick等事件处理程序。
href
、src
getAttribute()
获取的是 href 的实际值,而点号获取的是完整的 url,存在浏览器差异。
1 | <a href="#"></a> |
-
style
,用于通过CSS为元素指定样式。
在通过getAttribute()
访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会返回一个对象。由于style
属性是用于以编程方式访问元素样式的,因此并没有直接映射到style
特性。 -
onclick
这样的事件处理程序。
当在元素上使用时,onclick
特性中包含的是 JavaScript 代码,如果通过getAttribute()
访问,则会返回相应代码的字符串。而在 DOM 中访问onclick
属性时,则会返回一个 JavaScript函数(如果未在元素中指定相应特性,则返回null)。这是因为 onclick 及其他事件处理程序属性本身就应该被赋予函数值。
由于存在这些差别,在通过 JavaScript 以编程方式操作 DOM 时,开发人员不经常使getAttribute()
,而是只使用对象的属性。
参考:
- MDN - Attr
- 阮一峰 - DOM - 属性的操作
- Attributes and properties
- property和attribute的区别