有关attribute和property，以及各自对select中option的影响

这个问题老生常谈，但是直到现在我依旧时常会把它搞混。下面列一些各自的特性。

	attribute	property
设置方法	option.setAttribute('selected', true) option.getAttribute('selected')	option.selected = true
dom节点表现	会表现在html节点上。打开控制台，可以看到 <option selected=true></option>	不会表现在html中。打开控制台，孤零零的 ：<option></option>
数据类型	当你把一个对象传给attribute时，它会转为string类型， 根据dom节点表现特点，很好理解，html代码就是字符串不可能有什么数据类型。 比如: option.setAttribute('test', {}) option.getAttribute('test') 你将得到"[object object]",它自动调用了Object.toString方法	而当你把一个对象传给property时，你可以保留这个对象。 比如： option.test = {}; 这就是代码层级的东西，跟html一点关系都没有

由上面我们可以看到：

attribute总是试图与html代码串产生关联，对attribute的操作会直接反映在页面html代码中。attribute的这个特性可以让我们在js代码执行前就定义好某些变量，然后在js执行时获取它们，虽然这些变量都是字符串类型，但是提前定义变量可以让我们实现很多事，它被广泛的应用在smarty模板中。

如果要在js执行过程中保存变量到某dom节点，不妨使用property，它可以把变量类型完美的保存下来，因此可以把dom节点上内置实现的函数浅显的理解为property。

下面以select，option为栗子，谈一下浏览器执行时，这两个东西的表现。

<select>

<option id="one" value="1">北京</option>

<option id="two"value="2">上海</option>

</select>

代码	property	attribute	选中状况
	one: true two: falss	one: null two: null	默认状态，one选中
设置two的attribuite，让它选中 two.setAttrbute('selected', true)	one: false two: true	one: null two: true	two选中 虽然我们设置的是attribuite，但是property发生了变化。 这里one.selected自动变为false。two.selected自动变为true
然后我们设置one的attrbute，让它选中 one.setAttribute('selected', true)	one: true two: false	one: true two: true	one选中 设置one的attribute后，property同上一次一样，自动做出了相应的变化， 但是attribute严格按照我们的代码，保留了我们设置的属性，所以出现了两个attribute都是true的情况。
然后我们再次设置two的attribuite，让它选中 two.setAttrbute('selected', true)	one: false two: true	one: true two: true	two选中 我们可以看到，attibuite没有变化

property，更像是浏览器的当前状态的一个反应，不只代码影响它，用户的交互也可以影响它。而attibute仅仅依赖代码的执行，仅仅你的代码可以改变它。

而对于浏览器控件来说，会有一些特殊的属性来决定它的表现与动作，如value，selected等。实质上起作用的是property的值。但是当我们设置attribute时，也会自动触发propery的改变(从上表格可以看出，不管attribute值变化与否，只要赋值就会引发propery的变化)，从而达到控制控件动作样式的目的。相对的，我们设置propery时，不会改变attribute，只能控制控件的动作样式。最近我在工作重发现，设置disabled的prop值时，attr也会受影响。button.disabled=true，反映在html中的状态是<button disabled></button>，再执行button.disabled=false，html恢复原样<button disabled></button>。