DOM属性操作

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.value=’757617012@qq.com’;

类型

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');  //通过方法 指定 『属性字符串:属性值字符串』