被問到 property 和 attribute 的區別，想來也是要好好看一下。
一、基本概念區別
其實Attribute和Property這兩個單詞，翻譯出來都是“屬性”，《js高級程序設計》書中翻譯為“特性”和“屬性”，以示區別。從而我們也可以顧名思義
特性vs屬性（當然平時也可以簡單的說兩者都是屬性），可以這樣認為：
Attribute
是HTML標簽上的某個屬性（特性），如‘type’,'id','value','class'以及自定義屬性，它的值只能是字符串。
Property
javascript獲取到的DOM節點對象，比如a 你可以將他看作為一個基本的js對象，這個節點對象包括很多屬性((property)，比如“value”，“className”)
以及一些方法，setAttribute,getAttribute,onclick等
還是太生澀了？看個input的例子
<input type="text" name="age" class="age" id="age" value="17" myAttr="myAttr">
可以看到，attributes只是properties這個大貨色中的某個屬性，其余property也是這樣（和attributes同級）
再來看看attributes這貨長什么樣？
ok那我們可以直接這樣玩了
也許是因為class是js的保留字，不能直接age.class吧，用className代替這幾種方式分別獲取了attribute和property
但是我們的自定義屬性，就有不同了
常用的Attribute，例如id、class、name等，已經被作為Property附加到DOM對象上，可以和Property一樣取值和賦值。但是自定義的Attribute，就不會有這樣的特殊優待
attribute的獲取設置修改一般使用 setAttribute()和getAttribute() 比較方便
而property 則使用 打點符. 或 [] 的方式獲取即可
二、一些息息相關又有差異的東東
1. value的差異
默認情況下是17
手動或直接代碼更改value為15后（可以看出輸入框value的變化只會引起property方面的變化）
那主動權換為attribute呢？
2. name , id, class （互相影響）
同樣的，讓attribute來主動
class的操作
3.上面都是在原有屬性改來改去，那增添新的屬性會怎樣呢？
abc，cba是可以認為是一個非默認屬性吧，title,align 是，看下結果慢慢領會
把主動權交給attribute
所以一般對於默認的自有屬性而言，property和attribute的影響是雙向的
事實上value這東西真的很... 假設我最初沒有value，會發生什么呢？
<input type="text" name="age" class="age" id="age" myAttr="myAttr">
所以啊，這是個特例，要想attribute的value也能得到變化，還非得特地去setAttribute()才行
4.對於形如 hidden：true的屬性
高能預警：看這個東西會死很多腦細胞..(我的建議是跳過這段吧）
可以發現，若初始
假如我一開始input就設置了hidden呢？
<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden>
是不是很繞啊~~~~~~
那假如我一開始就給hidden來個屬性呢,比如 no_hidden？（這樣輸入框也是會直接隱藏的）
<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden="no_hidden">
我們來看看操作
還有一種情況額，假如我設置為 hidden=true呢
<input type="text" name="age" class="age" id="age" myAttr="myAttr" hidden=true>
基本沒其他情況了吧，總結一下？ 好難總結，還是算了..
5. style屬性
<input type="text" name="age" class="age" id="age" myAttr="myAttr" style="width:50%;height:30px;">
對於這其中的style Attribute和property的返回有什么不同呢？ Attribute照常是字符串，而property則是個對象
6. onclick屬性
<input type="text" name="age" class="age" id="age" myAttr="myAttr" onclick="function(){}">
Attribute可以正確獲取到，而property方式就只能作為事件處理機制（所以會報錯），也許也可以將其歸入自定義屬性的行列
7. src 或 href 這些有鏈接形式的屬性
<img src="./1.jpg" id="img">
獲取的時候，Attribute會直接使用表面上的屬性（相對路徑），property則會使用實際的絕對路徑(設置的時候可以用相對）
三、來個小小的總結
1.沒有非常明確的區別，只是有某些規律可遵循
2.attributes是和每個Property是在同一父級（可以這樣認為吧）的，而每個Attribute的父級就是attributes
3. Attribute可以理解為特性（就是說可以有自定義的屬性），property可以理解為屬性（即html最基本提供的屬性）
4.一般來說，無論開始還是任何時候，Attribute的變化會引起Property的變化, 而property的變化也會同步給Attribute進行變化（value除外）
5.有一些特殊的屬性，要特殊對待
6.為了統一，最好直接使用 setAttribute()和getAttribute() ,IE8以上都支持了，不過IE6/7不支持的話，
比如obj.setAttribute("style","z-index:999;cursor:pointer")不支持，
那就退化成obj.style.cssText="z-index:999;cursor:pointer";
7.jq提供的 attr()和prop()方法， 其實就是基於 Attribute和property原生的使用方式