1. 定義
Property：屬性俱诸，所有的HTML元素都由HTMLElement類型表示馅巷，HTMLElement類型直接繼承自Element并添加了一些屬性急前，添加的這些屬性分別對應于每個HTML元素都有下面的這5個標準特性：id狈网，title礼搁，lang饶碘，dir，className馒吴。DOM節(jié)點是一個對象扎运，因此，他可以和其他的JavaScript對象一樣添加自定義的屬性以及方法饮戳。property的值可以是任何的數(shù)據(jù)類型豪治，對大小寫敏感，自定義的property不會出現(xiàn)在html代碼中扯罐，只存在js中负拟。
Attribute：特性，區(qū)別于property歹河，attribute只能是字符串掩浙，大小寫不敏感花吟，出現(xiàn)在innerHTML中，通過類數(shù)組attributes可以羅列所有的attribute厨姚。
2. 相同之處
標準的 DOM properties 與 attributes 是同步的衅澈。公認的（非自定義的）特性會被以屬性的形式添加到DOM對象中。如谬墙，id今布，align，style等拭抬，這時候操作property或者使用操作特性的DOM方法如getAttribute()都可以操作屬性部默。不過傳遞給getAttribute()的特性名與實際的特性名相同。因此對于class的特性值獲取的時候要傳入“class”玖喘。
3. 不同之處
- 對于有些標準的特性的操作甩牺，getAttribute與點號(.)獲取的值存在差異性。如href累奈，src贬派，value，style澎媒，onclick等事件處理程序搞乏。
- href：getAttribute獲取的是href的實際值，而點號獲取的是完整的url戒努，存在瀏覽器差異请敦。
<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>
src的值的獲取類似href，不過IE也會返回full URL储玫；
value值同樣存在一些 'one-way'（單向）同步的內置屬性侍筛。
例如，input.value 從 attribute 中同步（即 property 從 attribute 中獲得同步）
<input type="text" value="markup">
<script>
var input = document.body.children[0];
input.setAttribute('value', 'new');
alert( input.value ); // 'new', input.value changed
alert( input.getAtrribute(value) ); // 'new'
</script>
但是 attribute 不能從 property 中獲得同步：
<input type="text" value="markup">
<script>
var input = document.body.children[0];
input.value = 'new';
alert(input.getAttribute('value')); // 'markup', not changed!
</script>
getAttribute獲取的是初始值撒穷，而點號獲取的是初始值或者.value修改后的值,例如當訪問者輸入了某些字符后匣椰，'value' attribute 在 property 更新后維持了原始值。原始值可以用來檢驗 input 是否變化端礼，或者重置它禽笑。
對于style和onclick等事件處理程序，getAttribute方法訪問時會返回字符串蛤奥，而點號返回的是相應的對象和事件處理函數(shù)佳镜。
對于input中的checked屬性，
<input type="checkbox" checked>
<script>
var input = document.body.children[0]
alert( input.checked ) // true
alert( input.getAttribute('checked') ) // empty string
</script>
getAttribute獲取的是你是實際設置的值凡桥。而點號返回的是布爾值蟀伸。
瀏覽器兼容性上的差別
- 在IE<9的瀏覽器中，可以用點號和getAttribute在相互之間訪問自定義屬性。
- IE<8（包括IE8種的IE7兼容模式）望蜡，property和attribute相同唤崭。因為attribute對大小寫不敏感，在這種情況下脖律，用getAttribute訪問特性的時候谢肾，瀏覽器會選擇第一次出現(xiàn)的值。
document.body.abba = 1 // assign property (now can read it by getAttribute)
document.body.ABBA = 5 // assign property with another case
// must get a property named 'ABba' in case-insensitive way.
alert( document.body.getAttribute('ABba') ) // 1
優(yōu)先選擇property
在實際應用中小泉，98%的 DOM 操作都是使用 properties芦疏。
只有兩種情形需要使用attributes
- 自定義 HTML attributes，因為它并不同步到DOM property微姊。
- 訪問內置的 HTML attributes酸茴，這些 attribute 不能從 property 同步過來。例如 INPUT標簽的value值兢交。
參考資料：
http://javascript.info/tutorial/attributes-and-custom-properties
