每個 HTML 屬性都會對應(yīng)相應(yīng)的 DOM 對象屬性。
<div>
<label for="username">User Name: </label>
<input type="input" name="username" id="username" class="text" value="">
</div>
input.id; // 'username'
input.type; // 'text'
input.className; // 'text'
label.htmlFor; // 'username'
通過屬性方法符得到的屬性為轉(zhuǎn)換過的實例對象(并非全字符串)。
特點
讀取屬性
<div>
<label for="username">User Name: </label>
<input type="input" name="username" id="username" class="text" value="">
</div>
input.className; // 'text'
input[id]; // 'username'
寫入屬性
可增加新的屬性或改寫已有屬性。
input.value = 'new value';
input[id] = 'new-id';
特點
讀取屬性
獲取到的均為屬性的字符串。
var attribtue = element.getAttribute('attributeName');
寫入屬性
可增加新的屬性或改寫已有屬性。
element.setAttribute('attributeName', value);
自定義屬性,其為 HTMLElement 上的屬性也是 data-* 的屬性集。主要用于在元素上保存數(shù)據(jù)。獲取的均為屬性字符串。數(shù)據(jù)通常使用 AJAX 獲取并存儲在節(jié)點之上。
<div id='user' data-id='1234' data-username='x' data-email='mail@gmail.com'></div>
div.dataset.id; // '1234'
div.dataset.username; // 'x'
div.dataset.email; // 'mail@gmail.com'
NOTE:dataset 在低版本 IE 不可使用,但可通過 getAttribute 與 setAttribute 來做兼容。