el.value与el.getAttribute("value")的区别

当我们使用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

console.log(typeof checkbox.checked);                    //boolean
console.log(typeof checkbox.getAttribute('checked'));    //string

• 一般来说，property和attribute的值是相同的，但也有不相同的例子，比如a元素的href属性：

 

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的默认值）