屬性操作

• 屬性操作
  • HTML 屬性與 DOM 屬性的對應(yīng)
  • 屬性操作方式
    • Property Accessor
    • getAttribute / setAttribute
    • dataset

屬性操作

HTML 屬性與 DOM 屬性的對應(yīng)

每個 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'

屬性操作方式

Property Accessor

通過屬性方法符得到的屬性為轉(zhuǎn)換過的實例對象（并非全字符串）。

特點

• X 通用行差（命名異常，使用不同的命名方式進(jìn)行訪問）
• X 擴(kuò)展性差
• √ 實用對象（取出后可直接使用）

讀取屬性

<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';

getAttribute / setAttribute

特點

• X 僅可獲取字符串（使用時需轉(zhuǎn)換）
• √ 通用性強

讀取屬性

獲取到的均為屬性的字符串。

var attribtue = element.getAttribute('attributeName');

寫入屬性

可增加新的屬性或改寫已有屬性。

element.setAttribute('attributeName', value);

dataset

自定義屬性，其為 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 來做兼容。