【フロントエンド】-030-DOMプログラミング-要素属性操作

2033 ワード

HTML属性とDOM属性の対応関係各HTML要素の属性に対応するDOMオブジェクト属性ユーザ名:

 input.id; //"userName"
 input.type; //"text"
 input.className; //"u-txt"
 label.htmlFor; //"userName"

2.属性操作の方式

property accessor(プロパティ・アクセサ)

要素属性の読み込みinput.className;//"u-txt"input["id"];//input.idに相当し、「userName」

書き込み要素属性input.value="www.baidu.com";input要素ノードにvalueプロパティを追加し、その値を「www.baidu.com」

に設定します.

取得要素のタイプ、変換されたユーティリティ

  input.className; //"u-txt", String
  input.maxlength; //10, Number
  input.disabled; //true, Boolean
  input.onclick; //Function

特徴汎用性が悪く、名前が異常である;拡張性が悪い.利点は、取得した要素タイプがユーティリティ

であることです.

getAttribute/setAttribute

プロパティを読み込み、var attr = element.getAttrubute(attrubuteName);ユーザー名:

  input.getAttribute("class"); //u-txt

書き込み属性、element.setAttribute(name, value);ユーザ名:

  input.setAttribute("value", "www.baidu.com"); 
  input.setAttribute("disabled", "");

取得要素のタイプ、属性文字列

  input.getAttribute("class"); //"u-txt", String
  input.getAttribute("maxlength"); //"10", String
  input.getAttribute("disabled"); //"", String
  input.getAttribute("onclick"); //"showSuggest()", String

特徴取得属性値が文字列、汎用性が強い

dataset(カスタムプロパティ)

定義

形式はHTMLElement.datasetであり、すなわちHTML上Element要素カスタム属性

名称はdata-*であり、すなわちdata-先頭に名前を付ける

エレメント上のユーザがカスタマイズしたデータ保存用

データは通常AJAXを使用して取得され、ノード上に格納される

例

div.dataset.id; //'123456'
div.accountName; //'nc'
div.dataset.email; //'[email protected]'

思考问题:dataset低バージョンIEでは使用できませんが、getAttributeとsetAttributeで互換性を作るにはどうすればいいですか.

WeChatウィジェットWeChatウィジェット:カスタムポップアップレイヤ

VC透明ビットマップの実現原理