當(dāng)我們使用querySelector找到一個DOM對象之后元扔，如果需要得這個對象的某個屬性值起便，比如一個input的value值，好像使用el.value和el.getAttribute("vaue")得到的結(jié)果都是一樣凌彬。那么為什么會有這兩種看起來差不多的方法把介？這兩種方法有什么區(qū)別嗎？
其實這兩個看起來差不多的方法從定義上就完全不一樣厢漩。getAttribute返回的是HTML元素的屬性熬苍，而el.value返回的是定義在DOM對象上的value屬性。由于中文都翻譯為屬性袁翁，比較容易混淆，英文的區(qū)別比較明顯：DOM上定義的是property（DOM是一個對象）婿脸，而HTML上定義的是attribute粱胜。
一般來說property和attribute是一一對應(yīng)的關(guān)系，所以一般情況下el.getAttribute('value')和el.value的結(jié)果是一樣的狐树。但是要注意下面幾個區(qū)別：
- property可以為不同的類型焙压，比如boolean、string等等
- attribute全部為string
<input type="checkbox" checked=true/>
console.log(typeof checkbox.checked); //boolean
console.log(typeof checkbox.getAttribute('checked')); //string
- 一般來說抑钟，property和attribute的值是相同的涯曲，但也有不相同的例子，比如a元素的href屬性：
<a href="/" id="hey"></a>
var a = document.getElementById('hey'); //返回"/"
console.log(a.getAttribute('href')); //返回當(dāng)前網(wǎng)頁的完整地址
console.log(a.href);
- 如果對象有默認值在塔，則attribute將始終返回默認值幻件，而property則會實時更新。比如input元素蛔溃，如果設(shè)置了一個默認的value值绰沥，則getAttribute將始終返回這個默認值，el.value則會隨著用戶的輸入而更新贺待。
正是因為這些區(qū)別徽曲，一般建議使用dom對象的property（既使用el.value）而非attribute。只在以下兩種情況可使用元素的attribute：
- 當(dāng)訪問自定義attribute時（無同步的DOM對象）
- 當(dāng)你確實需要attribute的值時（比如確定需要input的默認值）
