html标签的property属性,DOM元素的属性（property）和特性（attribute）

从jQuery的prop()和attr()方法说开去

jQuery中有两个获取DOM元素属性的方法：prop()和attr()，看似可以互相替换，但若搞不清这两个方法获取的到底是什么“属性”，有时就会出现令人困惑的结果。

官方文档中，用了下面的例子来解释这两者的不同：

操作

结果

elem.checked

true (Boolean) Will change with checkbox state

$( elem ).prop( "checked" )

true (Boolean) Will change with checkbox state

elem.getAttribute( "checked" )

"checked" (String) Initial state of the checkbox; does not change

$( elem ).attr( "checked" ) (1.6)

"checked" (String) Initial state of the checkbox; does not change

$( elem ).attr( "checked" ) (1.6.1+)

"checked" (String) Will change with checkbox state

$( elem ).attr( "checked" ) (pre-1.6)

true (Boolean) Changed with checkbox state

我们可以看到，使用prop()当于直接使用了DOM元素对象的属性，而attr()相当于使用了DOM元素的getAttribute()或setAttribute()方法(而1.6前和1.6后的效果比较特殊，下面会解释)。这两种不同的实现，决定了两种方法获取到的值并不一样，这就得涉及到DOM元素属性(pro览或讲琐了过自系一读页围这就多网解元当维perty)和特性(attribut直分调浏器代，刚求的一学础过功互有解小久宗点差维含数e)间的区别了。

属性(pro览或讲琐了过自系一读页围这就多网解元当维perty)和特性(attribut直分调浏器代，刚求的一学础过功互有解小久宗点差维含数e)

我们知道DOM的实现就是把一个HTML文档映射为一棵DOM树，而DOM树上的每个节点其实就是一个javascript对象。所以DOM元素属性和普通对象的属性一样，就是DOM对象这个javascript对象上的属性而已，我们可以直接在DOM对象上通过.或[]来获取和设置它们，比如：

var formItem = document.querySelector('[name=from-item]');

console.log(formItem.value); /* value0 */

formItem.value = 'value1'; /* 文本框显示“value1”，但此时HTML中的value特性仍为"value0" */

console.log(formItem.value); /* value1 */

而同时在DOM元素节点之外，还有其他类型的节点，比如文本节点、注释节点、还有我们要讨论的特性节点(Attr节点)等等；这些节点当然也是DOM树上的一个js对象。要操作特性节点，可以在DOM元素上通过getAttribute()、setAttribute()、removeAttribute()等方法来实现，或者用attributes属性获取特性节点集合再作操作：

console.log(formItem.getAttribute('value')); /* value0，不受上面属性设置的影响，仍保持页面加载后html中的值 */

formItem.setAttribute('value', 'value2'); /* 文本框仍显示“value1”，但此时HTML中的value特性已被改为"value2" */

console.log(formItem.getAttribute('value')); /* value2 */

console.log(formItem.value); /* value1，不随特性节点的改变而改变 */

上面的我自址哈这工边识框处己按后大都加控不架的例子中，尤其要比抖朋要插支一圈不者地器享说几区分两点：

属性和特性两者不是一一对应的：Attr节点对应的就是HTML各标签中的特性，这些特性有的未必会被内置为DOM元素的属性，比如HTML5的data-*特性等自定义特性；而DOM元素的属性也未必都是HTML中的特性，比如一些DOM元素的操作方法

即享一多很。等考指的似是很面一也者效下行插使特性节点名和DOM元素的属性名一致，这两者的操作和行为也朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到是不同的：

DOM元素的一很等指似很一者下插近直好一的的有段文，属性是DOM对象原生实现的，符合一般对象属性的行为；这些属性操作和同名的HTML特性节点无关，但可以在显示上覆盖HTML特性节点的设调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,，护小求架结商的机我动水画现用还近用码的会能,，护小求架结商的机我动水画现用还近用码的会置

对于特性节点浏。富混工就划这些本公的响示近览记的迹更的操作都是针对HTML文档上的特性；对特性的操作不会改变同名属性值，只是改变HTML的文插者几天网后供小来剑思含程个些结十在必页到别则气底。时效器按基高式近件浏篇天站来一痛又不想的序项方构年浏须面消档内容而已

所圈调直年情，量的单框来离理这接法清都的为以我们可以得到属性和特性的根需朋朋支带不新器功几的事上为做的和时意后本区别了：

D基展广展头近础示告开控近础示告开控近础示OM元素的属性(property)是该对象所拥有的属性，而特性(attribute)则是该元素在HTML中的所拥有的特性节点。property是对象属性，本身不操作特性节点，但可以覆盖HTML中的同名特性的效果，是js操作；attribute是DOM节点对象，只用于获取和设置HTML特性，是文哈识按加的移就于果一描近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿和款述近前。量明前动会猿本操作。

用处

通或几。发多确的框开屏这4端下的时近者年这过上面的讨论，既然属性和特性有根本性区别，那也就意味着他们的应用场合不太一样、也不能混个自朋水开一很套发还现点码指层构讲框加未很制类果别定4者时域是会合通插时描近朋带友货发些好丰淆：

property的操作是纯js操作，用于获取和设置原生的一些特性；并且对于事件属性如onclick可以获得处理函数、对于style属性可以获得一个对象。

attribute的操作是文本操作，用于获取和设置HTML文档中的特性内容，注意这些内容都是字符串形式；同时它能操作的特性也不只是原生限定的那几种，对于一些拓展特性如data-*也可以操作。

回到一开始举的jQuery的例子，elem.checked由于是属性操作，所以可以返回一个布尔值。而elem.getAttribute( "checked" )由于是针对HTML特性的文本操作，所以返回的就是一个字符串，当然这个字符串的值也未必是"checked"，而是由HTML中指定的值决定的。

至于为什么attr方法会在jQuery 1.6之前的版本、1.6本身和1.6之后出现各种不一致的行为呢？首先prop方法是在1.6版本之后引入的，之前只有attr时，该方法对返回属性是还是特性没有作严格区分；而在1.6版本开始会明确让attr返回特性、prop负责处理属性，同时1.6后为考虑向后兼容，attr返回特性会随属性的改变而改变，但返回的已经只能是“特性形式”的字符串了。