attribute和property的区别很多人分不清楚，我自己最近在看这方面内容时，也很迷糊，特地整理了一下，希望这篇文章能对你理解attribute和property的区别有帮助。
DOM node
为了区分它们，我们首先要学习一下DOM节点（node）的小知识。
DOM有三种节点类型：元素节点、属性节点、文本节点，HTML里的attribute其实就是指属性节点。举个例子，在<h1 id=”title”> Head</h1>里：
- h1是元素节点，
- id=”title”是属性节点，
- Head 是文本节点，
在这里可以理解为h1这个元素节点包含一个属性节点和一个文本节点。读写attribute的方法是getAttribute(), setAttribute(), 例如获取id这个属性的值：
var tem1 = document.getElementById("title"); var idValue = tem1.getAttribute("id");
浏览器如何解析html元素
在写html的代码时，你可以为html元素定义attributes属性。当浏览器解析代码时，会创建一个对应的DOM节点（node），这个node是一个对象，所以它会有Properties（更倾向于字段而不是属性）。
比如，这个html元素：<input type="text" value="Name:">
它有两个attributes（type和value）。当浏览器解析这个代码时会创建一个HTMLInputElement对象，这个对象包含一系列Properties，比如，accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, chilNodes, children, classList, clssName, clientHeight, etc.
理解HTML中property和attribute的区别
对于一个给定的DOM节点对象，Properties就是指这个对象的各种字段Properties，而attributes就是这个节点对象中attributes字段的元素。
当对一个给定的HTML元素创建DOM节点对象后，这个DOM对象的很多Properties和HTML元素的attributes会同名或者类似，但它们没有一一对应关系。比如，下面这个HTML元素
<input id="the-input" type="text" value="Name:">
对应的DOM对象会拥有id, type和value三个Property字段。
id Property对应id attribute，表现的作用是让id property读取id attribute的值，同时写入这个值，id是一个纯映射字段，它不会改变值或者限定值。type property映射type attribute，同样是读取和写入type attribute的值，但是type不是一个纯映射字段，因为type会限定值（比如输入的数据类型必须符合规范）。假如<input type="foo">，theInput.getAttribute("type")结果是”foo“，但是theInput.type结果却是”text“
相反，value property不映射value attribute，而是取当前输入的值（current value）。比如，用户输入”John“，theInput.value // returns "John"
然而：theInput.getAttribute('value') // returns "Name:"
我们可以看出来，value property获得的结果是当前输入值current value，而value attribute的值依然是最初HTML代码给定的内容text-content。
所以，当你要读取当前用户输入框的值时，须要读取字段property值；但如果你要获取text-box最初给定的值，须要读取attribute值。或者用defaultValue property，因为它是和value attribute是纯映射关系。theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
他们之间的映射关系有不同的类型。
—完全一样的纯映射并且名称也一样的property/attribute是：rel, id;
—是纯映射但是名称有差别的是：htmlFor property-for attribute, className property-class attribute;
—部分property映射attribute，但是对值有限制/修改的，比如：src, href, disabled, multiple;
The spec有更多关于他们之间的映射关系，可以查看。
总结一下attribute和property的主要区别。
1. attribute是一种节点（属性节点），和元素节点是一个级别的节点，或者说你可以简单的认为attribute是一个属性节点对象；
2. property则是对象的一个字段，可能元素节点对象的字段或属性节点对象的字段还有文本节点对象。
3. DOM property和HTML元素attribute纯在映射关系，他们的名称可能相同/类似或者不同。因此，我们既可以通过attribute的写法 来获取attribute的值：var idValue = tem1.getAttribute("id");
又可以通过property的写法来获取attribute的值，如：var idValue = tem1.id;
学完这一点，还可以延伸学习一下相关面向对象编程术语，可以更好的帮助我们理解这类模型，理论上来说他们是相同的原理。
