DOM属性

每个HTML属性都会有与之相对应的DOM对象属性。

<p>

<label for="username">用户名:</label><input type="input" name="username" value="">

</p>

在以上代码中，html中label的for属性对应的DOM对象属性是label.htmlFor，label.htmlFor===“username”；

简单来说，html元素、标签对应于DOM对象，html元素、标签的属性对应于DOM对象的属性，并且是一一对应的关系。

属性访问器（property accessor）

可以直接通过属性访问器读取、修改、添加属性。针对上面一段代码label标签的for属性值为username，使用属性访问器访问该属性的方法可以是label.htmlFor和label["htmlFor"],这两种方法都可以准确的读取到label标签的for属性值，即：表达式label.htmlFor===“username”；和label["htmlFor"]===“username”；的返回值都是true。

label["htmlFor"]=Uname；//该表达式将label标签的for属性值改为了Uname

label.className=username；//该表达式为label标签添加了值为username的class属性

该方法获取到的属性值为转换过的实例对象。

getAttribute/setAttribute

getAttribute() 方法返回指定属性名的属性值。传入参数为属性名。表达式input.getAttribute（“id”）；可以获取到input标签的id属性。getAttribute() 方法获取到的属性值均为字符串类型。

setAttribute() 方法添加指定的属性，并为其赋指定的值。必须顺序传入属性名和属性值两个参数。表达式input.setAttribute（“value”，“一锅杂货铺”）；可以为input填入值为“一锅杂货铺”的value属性。

dataset

dataset是html元素上的一个自定义属性，也可以用来表示data-*的属性集合，主要用于在元素上保存数据。结合ajax使用可以制作浮层显示效果，常见的实例是当鼠标移到某个元素上之后就显示一个小卡片，上面有更加详细的信息。

dataset的理解和使用，一锅会在后期结合ajax再出一期，敬请期待~