输入框的value问题（DOM的property和attribute）

问题描述：

用js给input赋值的一般采用以下两种方式：
一、i.value=200;
二、i.setAttribute('value',300);

已上两种看似都是给value赋值，但是结果去不同。如图，在控制台里一步步执行代码结果：

i=document.getElementById('search-input');
i.value;

i.value=200;
i.value;

i.setAttribute('value',300);
i.value;
i.getAttribute('value');

图1

---

图2

---

原因分析：

dom结构里的value="300"其实是input的Attribute属性的一个子属性(为了便于理解，暂且这么叫)；
而input的value是它本身的一个属性(平常用的也是这个，如$('#search-input').val())。
dom结构里的value值等于input的defaultValue属性的值。

此问题归根结底是由于DOM的property和attribute的区别：

attribute

input节点有很多属性(attribute)：‘type’,’id’,’value’,’class’以及自定义属性，在DOM中有setAttribute()和getAttribute()读写DOM树节点的属性(attribute)

PS:在这里的getAttribute方法有一个潜规则，部分属性（input的value和checked）通过getAttribut取到的是初始值，这个就很好的解释了图2结果为什么为2。

property

javascript获取到的DOM节点对象，比如input
你可以将他看作为一个基本的js对象，这个对象包括很多属性(property)，比如“value”，“className”以及一些方法，setAttribute,getAttribute,onclick等，值得注意的是对象的value的属性(property)取值是跟着输入框内的当前值一起更新的，这解释了图1中7为什么为200了。
所有在日常的工作中，推荐是使用 property,这样事情处理起来比较简单一些，attribute永远是字符串。。

---

在控制台里用console.dir(i)打出下input的属性，便一目了然。

如图：