在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ 屬性操作
書單
JavaScript 動畫
HTML
CSS Reset
屬性操作
DOM 事件
閉包
Photoshop
Atom 文本編輯器
表單操作
布局解決方案
類型系統(tǒng)
開發(fā)實踐
數(shù)據(jù)通信
變量作用域
BOM
JavaScript 程序設(shè)計
前端工程師概述
CSS
響應(yīng)式布局
表達式與運算符
基本語法
JavaScript 介紹
版本控制
布局
調(diào)試器
背景
圖片保存
多媒體
文檔樹
列表操作
Sublime 編輯器
盒模型
常見布局樣例
類型識別
變形
數(shù)據(jù)存儲
選擇器
頁面架構(gòu)
開發(fā)及調(diào)試工具
頁面模塊化
節(jié)點操作
測量及取色
瀏覽器兼容
HTML 簡介
內(nèi)置對象
實體字符
產(chǎn)品前端架構(gòu)
協(xié)作流程
切圖
工具, 面板, 視圖
正則表達式
動畫
語句
面向?qū)ο?/span>
HTML 語法
HTML 標簽
技術(shù)選擇
樣式操作
圖片優(yōu)化與合并
語法
DOM 編程藝術(shù)
Canvas
接口設(shè)計
頁面優(yōu)化
文本

屬性操作

屬性操作

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 通用行差(命名異常,使用不同的命名方式進行訪問)
  • X 擴展性差
  • √ 實用對象(取出后可直接使用)

讀取屬性

<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 不可使用,但可通過 getAttributesetAttribute 來做兼容。

上一篇:圖片優(yōu)化與合并下一篇:文檔樹