当我们使用querySelector找到一个DOM对象之后，如果需要得这个对象的某个属性值，比如一个input的value值，好像使用el.value和el.getAttribute("vaue")得到的结果都是一样。那么为什么会有这两种看起来差不多的方法？这两种方法有什么区别吗？
其实这两个看起来差不多的方法从定义上就完全不一样。getAttribute返回的是HTML元素的属性，而el.value返回的是定义在DOM对象上的value属性。由于中文都翻译为属性，比较容易混淆，英文的区别比较明显：DOM上定义的是property（DOM是一个对象），而HTML上定义的是attribute。
一般来说property和attribute是一一对应的关系，所以一般情况下el.getAttribute('value')和el.value的结果是一样的。但是要注意下面几个区别：
- 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')); //返回当前网页的完整地址
console.log(a.href);
- 如果对象有默认值，则attribute将始终返回默认值，而property则会实时更新。比如input元素，如果设置了一个默认的value值，则getAttribute将始终返回这个默认值，el.value则会随着用户的输入而更新。
正是因为这些区别，一般建议使用dom对象的property（既使用el.value）而非attribute。只在以下两种情况可使用元素的attribute：
- 当访问自定义attribute时（无同步的DOM对象）
- 当你确实需要attribute的值时（比如确定需要input的默认值）
