HTML attribute --> DOM property
每个html属性都对应一个DOM对象属性，举个栗子：
<div> <label for="userName">用户名:</label> <input id="userName" type="text" class="u-txt" /> </div>
| HTML | DOM |
| input.id | input.id |
| input.type | input.type |
| input.class | input.className |
| label.for | label.htmlFor |
读
input.className // “u-txt” input[“id”] // ”userName”
写
类型
input.
| 属性名 | 返回值 | 返回值类型 |
| className | “u-txt” | String |
| maxLength | 10 | Number |
| disabled | true | Boolean |
| onclick | function onclick(event){ … } | Function |
通用性--名字异常： 由于一些属性名与关键字重合，所以不能直接使用属性名访问，如class就会变成className
扩展性
实用对象
g/setAttribute
读
var attribute=element.getAttribute(attributeName);
<div> <label for="userName">用户名:</label> <input id="userName" type="text" class="u-txt"> </div>
input.getAttribute("class"); //"u-txt"
写
element.setAttribute(name,value);
<div> <label for="userName">用户名:</label> <input id="userName" type="text" class="u-txt"> </div>
input.setAttribute("value","757617012@qq.com");
input.setAttribute("disabled",""); //在html中，布尔型的属性只要出现默认是true
类型
<input class="u-txt" maxlength="10" disabled onclick="showSuggest();">
input.getAttribute(“ 属性字符串
| 属性名 | 返回值 | 返回值类型 |
| class | “u-txt” | String |
| maxlength | “10” | String |
| disabled | “” | String |
| onclick | “showSuggest();” | String |
”)
举个栗子(用两种方法将button设置为『不可点击』):
开始做，坚持做，重复做button.disabled = true; //设置 『属性』 button.setAttribute('class','disabled'); //通过方法 指定 『属性字符串:属性值字符串』
