1、Attribute###
Attribute是HTML上設置的屬性，在html中顯式地設置，或者通過setAttribute()方法設置。
<input type='text' id='txt' a=b />
比如這樣一段html代碼，實際上它有三個attribute屬性，我們可以打印出來看看：
var a = document.getElementById('txt');
console.log(a.attributes);
對於Attribute而言，它有三個常用的方法setAttribute()、getAttribute()以及removeAttribute()：
var a = document.getElementById('txt');
a.setAttribute('value', 'test');
console.log(a.getAttribute('a')); // b
a.removeAttribute('a');
console.log(a.getAttribute('a')); // null
對於用setAttribute()和removeAttribute()方法設置和刪除的屬性來說，會實時地反映在html頁面的代碼上。Attribute的屬性值只能是字符串，屬性鍵大小寫不敏感，比如：
<input type='text' id='txt' a=b A='c'/>
可以打開控制台看看代碼的html結構（A被自動隱去了）。
可以說，如果想要獲取一個DOM元素的attribute屬性值，只要打開控制台看看該DOM標簽的html代碼，任何時候attribute值和html標簽內設置的屬性值都是同步的。
2、Property###
Property則比Attribute復雜一點。DOM是JavaScript里的對象，Property是DOM中的屬性，它的屬性值主要通過點運算符來獲取和改變。這個對象實現了很多屬性（property）：'value'，'className'等，以及一些方法getAttribute，setAttribute等，它也可以和其他的JavaScript對象一樣添加自定義的屬性以及方法。property的值可以是任何的數據類型，對大小寫敏感，自定義的property不會出現在html代碼中，只存在js中。
還是示例代碼，他的property屬性值有哪些？
<input type='text' id='txt' a=b />
<script type="text/javascript">
var a = document.getElementById('txt');
console.log(a.type); // text
console.log(a.id); // txt
console.log(a.a); // undefined
console.log(a.title); // ''
</script>
我們在html頁面的input元素中設置了a屬性，但是在property中卻是訪問不到的；相反我們沒有在html頁面中設置的title，訪問它卻沒有反映undefined！這是怎么回事？因為所有的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element並添加了一些屬性，每個HTML元素都有下面的這5個標准特性：id，title，lang，dir，className（在DOM中以property方式操作這幾個特性會同步到html標簽中）。所以即使在html中沒有指定id、title等，也會默認賦予一個空串，通過property屬性（點操作符）可以訪問。而除此之外在html中設置的其他屬性是不能通過Property訪問到的（attribute特有的屬性）。
如果把DOM元素看成是一個普通的Object對象，那么property就是一個以名值對(name='value')的形式存放在Object中的屬性。要添加和刪除property也簡單多了，和普通的對象沒啥分別：
var a = document.getElementById('txt');
a.age = 10;
console.log(a.age); // 10
delete a.age;
console.log(a.age); // undefined
除了id、title等5個屬性（property）外（每個element元素都有），個別的元素還有特別的屬性，比如input元素有name，a元素有href等等。
3、Attribute vs Property###
既然說有些屬性既能通過attribute訪問修改，也能通過property，那么有什么值得注意的地方呢？
之所以attribute和property容易混倄在一起的原因是，很多attribute節點還有一個相對應的property屬性，比如div元素的id和class既是attribute，也有對應的property（id和className），不管使用哪種方法都可以訪問和修改，如果在TAG對這些屬性進行賦值，那么這些值就會作為初始值賦給DOM的同名property。
- input元素的value
input元素的value屬性是一大坑爹處，看下面代碼：
var a = document.getElementById('txt');
a.setAttribute('value', 'test');
console.log(a.value); // test
a.value = 'change';
console.log(a.getAttribute('value')); // test
用點操作符改變value值，並不會更新attribute的value值；而相反用attribute更新value值，卻會反映到property上...坑吧，誰規定的！
- 表單元素
DOM元素一些默認常見的attribute節點都有與之對應的property屬性，比較特殊的是一些值為Boolean類型的property，如一些表單元素。對於這些特殊的attribute節點，只要存在該節點，對應的property的值就為true，如：
<input type='radio' checked='checked' id='radio'>
<script>
var radio = document.getElementById('radio');
console.log(radio.getAttribute('checked')); // 'check'
console.log(radio.checked); // true
</script>
disabled類似。
- href
兩者對於href的獲取也有不同之處，attribute取到的是實際設置的值（相對路徑），而property取得的是絕對路徑：
<a href='a.html' id='web'> </a>
<script>
var radio = document.getElementById('web');
console.log(web.getAttribute('href')); // 'a.html'
console.log(web.href); // 絕度路徑
</script>
4、總結###
Attribute屬性在html上設置，會反應在html代碼上，兩者同步；而Property屬性則可以看做是DOM對象的鍵值對，用點操作符對它們進行操作。
實際編程中，基本上的DOM操作都是使用property的點操作符。
只有兩種情況不得不使用attribute：
- 自定義HTML Attribute，因為它不能同步到DOM property上
- 訪問內置的HTML標簽的Attribute，這些attribute不能從property上同步過來，比如input標簽的value值（可以用來檢驗input值是否變化）