attributes
属于 HTML。为了易于区别,我们译为特性
。
properties
属于 DOM,译为属性
,而在 JavaScript 中我们操作 HTML 时使用的就是 DOM。
比如这样一段html代码,input 元素就有三个 attribute。
<input type='text' id='txt' a=b />
HTML 元素映射到 DOM 是 HTMLElement 类型的节点对象,HTMLElement 类型的节点对象有一个 attributes 属性,这个属性本身也是一个对象,HTML 元素的所有 attribute 都包含在这个对象里面。
attributes 对象特点:
attributes 对象本身也有一些操作 HTML 的 attribute 的方法,但是实际上,这个对象极少使用。一般都是通过 HTMlElement 节点对象的几个方法来操作 HTML 的 attribute。
javascriptelem.hasAttribute(name) // 检查 attribute 是否存在
elem.getAttribute(name) // 获得 attribute
elem.setAttribute(name, value) // 设置 attribute 的值
elem.removeAttribute(name) // 删除 attribute
在JS里面我们使用 DOM 来操作 HTML 元素,DOM 为了操作 HTML ,将 HTML 中的元素描绘成一个个的节点,HTML 元素的每一个公认的(非自定义的) attribute
映射为节点对象上一个个的 property
。
properties 特点:
例:
<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
上面我们讲了,HTML 元素的每一个 公认的(非自定义的) attribute 映射为节点对象上一个个的 property 。那么自定义的怎么办?
有时,需要在HTML元素上附加数据,供JavaScript脚本使用。一种解决方法是自定义特性。
<div id="mydiv" foo="bar">
上面代码为 div 元素自定义了 foo 特性,然后可以用getAttribute()
和setAttribute()
读写这个特性。这种方法虽然可以达到目的,但是会使得HTML元素的属性不符合标准,导致网页的HTML代码通不过校验。
更好的解决方法是,使用标准提供的data-*
特性。
<div id="mydiv" data-foo="bar">
HTMLElement 节点对象有一个 dataset
属性,它本身也是一个对象,可以用来操作 HTML 元素的data-*
特性。
jsvar n = document.getElementById('mydiv');
n.dataset.foo // bar
n.dataset.foo = 'baz'
注意,data-后面的属性名有限制,只能包含字母、数字、连词线(
-
)、点(.
)、冒号(:
)和下划线(_
)。而且,属性名不应该使用 A 到 Z 的大写字母,比如不能有data-helloWorld
这样的属性名,而要写成data-hello-world
。
转成 dataset 的键名时,连词线后面如果跟着一个小写字母,那么连词线会被移除,该小写字母转为大写字母,其他字符不变。反过来,dataset 的键名转成属性名时,所有大写字母都会被转成连词线
+
该字母的小写形式,其他字符不变。比如,dataset.helloWorld
会转成data-hello-world
。
公认的(非自定义的)attribute,如id、class、titile等,都会有对应的 property 映射。
公认的(非自定义的) property 或 attribute 的变化多数是联动的。 attribute 更改时,相应的 property 将自动更新,反之亦然。
js// HTML
// <div id="test" class="button"></div>
var div = document.getElementById('test');
div.className = 'red-input';
div.getAttribute('class'); // "red-input"
div.setAttribute('class','green-input');
div.className; // "green-input"
但是有例外,带有默认值的 attribute 不随 property 变化而变化。
js// HTML
// <input id="search" value="foo" />
var input = document.getElementById('search');
input.value = 'foo2';
input.getAttribute('value'); // "foo"
有几类特殊的特性,它们虽然有对应的属性名,但属性的值与通过getAttribute()
返回的值并不相同。如href,src,value,style,onclick等事件处理程序。
href
、src
getAttribute()
获取的是 href 的实际值,而点号获取的是完整的 url,存在浏览器差异。html<a href="#"></a>
<script>
var a = document.body.children[0]
a.href = '/'
alert( 'attribute:' + a.getAttribute('href') ) // '/'
alert( 'property:' + a.href ) // IE: '/'; others: full URL
</script>
style
,用于通过CSS为元素指定样式。
在通过getAttribute()
访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会返回一个对象。由于style
属性是用于以编程方式访问元素样式的,因此并没有直接映射到style
特性。
onclick
这样的事件处理程序。
当在元素上使用时,onclick
特性中包含的是 JavaScript 代码,如果通过getAttribute()
访问,则会返回相应代码的字符串。而在 DOM 中访问onclick
属性时,则会返回一个 JavaScript函数(如果未在元素中指定相应特性,则返回null)。这是因为 onclick 及其他事件处理程序属性本身就应该被赋予函数值。
由于存在这些差别,在通过 JavaScript 以编程方式操作 DOM 时,开发人员不经常使getAttribute()
,而是只使用对象的属性。
参考:
本文作者:青波
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!