property 和 attribute非常容易混淆，兩個(gè)單詞的中文翻譯也都非常相近（property：屬性，attribute：特性），但實(shí)際上，二者是不同的東西，屬于不同的范疇。
property是DOM中的屬性，是JavaScript里的對(duì)象；
attribute是HTML標(biāo)簽上的特性，它的值只能夠是字符串；
簡(jiǎn)單理解，Attribute就是dom節(jié)點(diǎn)自帶的屬性，例如html中常用的id、class、title、align等。
而Property是這個(gè)DOM元素作為對(duì)象，其附加的內(nèi)容，例如childNodes、firstChild等。
這是由于，每一個(gè)DOM對(duì)象都會(huì)有它默認(rèn)的基本屬性，而在創(chuàng)建的時(shí)候，它只會(huì)創(chuàng)建這些基本屬性，我們?cè)赥AG標(biāo)簽中自定義的屬性是不會(huì)直接放到DOM中的。
那自定義的”title1“去哪里了呢？ title1”被放在了attributes這個(gè)對(duì)象里，這個(gè)對(duì)象按順序記錄了我們?cè)赥AG中定義的屬性和屬性的數(shù)量。
從這里就可以看出，attributes是屬于property的一個(gè)子集，它保存了HTML標(biāo)簽上定義屬性。
如果再進(jìn)一步探索attitudes中的每一個(gè)屬性，會(huì)發(fā)現(xiàn)它們并不是簡(jiǎn)單的對(duì)象，它是一個(gè)Attr類型的對(duì)象，擁有NodeType、NodeName等屬性。關(guān)于這一點(diǎn)，稍后再研究。注意，打印attribute屬性不會(huì)直接得到對(duì)象的值，而是獲取一個(gè)包含屬性名和值的字符串
HTML標(biāo)簽中定義的屬性和值會(huì)保存該DOM對(duì)象的attributes屬性里面；
這些attribute屬性的JavaScript中的類型是Attr，而不僅僅是保存屬性名和值這么簡(jiǎn)單；
常用的Attribute，例如id、class、title等，已經(jīng)被作為Property附加到DOM對(duì)象上，可以和Property一樣取值和賦值。但是自定義的Attribute，就不會(huì)有這樣的特殊優(yōu)待，例如：
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>
這個(gè)div里面的“title1”就不會(huì)變成Property。
即，只要是DOM標(biāo)簽中出現(xiàn)的屬性（html代碼），都是Attribute。然后有些常用特性（id、class、title等），會(huì)被轉(zhuǎn)化為Property。可以很形象的說，這些特性/屬性，是“腳踏兩只船”的。
最后注意：“class”變成Property之后叫做“className”，因?yàn)椤癱lass”是ECMA的關(guān)鍵字。
DOM有其默認(rèn)的基本屬性，而這些屬性就是所謂的“property”，無論如何，它們都會(huì)在初始化的時(shí)候再DOM對(duì)象上創(chuàng)建。
如果在TAG對(duì)這些屬性進(jìn)行賦值，那么這些值就會(huì)作為初始值賦給DOM的同名property。
attribute取值
getAttribute()可以取得任何特性，不管是標(biāo)準(zhǔn)的還是自定義的。
但是這個(gè)方法的瀏覽器兼容性有問題，有些瀏覽器可能會(huì)獲取屬性Property的值。
attribute賦值
用setAttrbute()賦值，任何Attribute都可以，包括自定義的。而且，賦值的Attribute會(huì)立刻表現(xiàn)到DOM元素上。
property取值
屬性取值很簡(jiǎn)單。取任何屬性的只，用“.”就可以
Property賦值
對(duì)屬性Property可以賦任何類型的值，而對(duì)特性Attribute只能賦值字符串！
另外，對(duì)于屬性Property的賦值在IE中可能會(huì)引起循環(huán)引用，內(nèi)存泄漏。為了防止這個(gè)問題，jQuery.data()做了特殊處理，解耦了數(shù)據(jù)和DOM對(duì)象。
in1.value='new value of prop';
console.log(in1.value); // 'new value of prop'
console.log(in1.attributes.value); // 'value="1"'
此時(shí)，頁面中的輸入欄的值變成了“new value of prop”，而propety中的value也變成了新的值，但attributes卻仍然是“1”。從這里可以推斷，property和attribute的同名屬性的值并不是雙向綁定的。
in2.setAttribute('value','ni')
console.log(in2.value); //ni
console.log(in2.attributes.value); //value='ni'
由此，可得出結(jié)論：
property能夠從attribute中得到同步；
attribute不會(huì)同步property上的值；
attribute和property之間的數(shù)據(jù)綁定是單向的，attribute->property；
更改property和attribute上的任意值，都會(huì)將更新反映到HTML頁面中；
