直奔主题，在深入学习javascript之前也许你没有刻意的去区分什么是javascript的attributes(特性)和properties(属性)。对于大多数人来说，其实就没关系过他们之间的区别和联系，似乎我们通常情况下遇到的都是属性。

在具体分析之前，直接上结论：

attributes仅仅是针对一般的HTML文档元素而言,也就是DOM元素节点自带的一些常用属性，比如id,class以及以data-前缀开头的自定义特性等等，而properties是针对将DOM元素看作节点对象时的一些附加内容，比如:firstChild,lastChild等等。即 properties for DOM Object,attributes for HTML Tag.

咱们来具体分析一下：

HTML文档元素针对的标签元素，所以attributes只是在这些标签元素上才有的，比如:

<div id="divid" class="divclass" title="divtitle">div</div>

这里div是一个标签元素，它的id,class和title根据上面的结论来说这些就是attributes(特性),这些特性保存在一个叫NamedNodeMap的对象中。发现没有，这里和我们日常的说法有差异，一般我们都把它们叫做属性。但是，这里为了区分我们严格称之为特性。

所以，下面来介绍什么是真正的properties(属性):

可以看到properties的内容更多，而且涵盖了attributes的内容。所以从范围上面来看properties是以node的视角来看的，它的属性的值可以是任何的类型

另外，自定义的特性只在JS中出现，不会影响HTML文档。

最后总结:

Attributes – is what's written in HTML.

Properties – is what's in DOM objects.

参考资料:

http://lucybain.com/blog/2014/attribute-vs-property/
http://joji.me/en-us/blog/html-attribute-vs-dom-property