attributes属于html中的属性 翻译为特性
properties属于DOM对象中的属性 翻译为属性

正常我们创建一个HTML元素时，浏览器会解析出这个对象和它拥有的一些属性
比如

<input type="text" value="name" />

这个input就有两个属性。

当我们通过DOM对象去获取属性，他们却不一定是简单的1对1的关系。
比如

<input id="the-input" type="text" value="Name:">

这个DOM节点有三个属性id,type,value.
1、id这个属性（properties）是映射的是html id的特性(attributes)。这个是不能改变和受限制的。是纯映射
2、type这个属性（properties）是映射的是html type的特性(attributes)。但这个不是纯映射关系
假设我们把设置为<input type='foo'>

theInput.getAttribute("type")   //输出的是foo
theInput.type                          // 输出的是text   

因为 type的属性是被限定在指定的值
3、相反的value这个属性（properties)，不是映射到html 'value'特性(attributes)。而是映射input现在的value。会随着输入的值变化而变化
假设我们输入的值join

theInput.value                             // 输出 "John"
theInput.getAttribute('value')       // 输出  "Name:"

如果你想知道 input的初始值是哪个。可以使用defaultValue这个属性。这个是与Value纯映射的