这个问题老生常谈，但是直到现在我依旧时常会把它搞混。下面列一些各自的特性。
| 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，只能控制控件的动作样式。