HTML のデータセット

データセット プロパティを使用すると、データ属性をより直接的に取得できます。このプロパティは、カスタム データ属性ごとに、エントリのみを含む DOMStringMap オブジェクトを返します。 HTML 要素インターフェイスのデータセット読み取り専用の概念により、指定された要素のカスタム データ属性 (data-*) への読み取り/書き込みアクセスが可能になります。これは、各 data-* プロパティのエントリを持つ文字列マップ (DOMStringMap) を提供します。データセットは DOM と HTML の両方で利用できます。

構文:

構文は次のように宣言されます

element.dataset.key

これはデータセットの最小限の作成です。

HTML データセットを使用すると、ユーザーは従来の HTML テーブルやその他の構造化マークアップを介してデータにアクセスできます。 HTML データセットは XML データセットと同様に機能しますが、既存の何百万ものテーブルを利用できる点が異なります。 XML をテーブル構造にフラット化したため、HTML データセットは明らかに拡張されました。データセットは、データ属性を保持する要素のネイティブ プロパティです。 IE11 以降と Chrome 8 以降ではほとんどサポートされていません。データセット項目の値は通常文字列ですが、jQuery の data() は によって提供される型を尊重します。データ (キー、値)。 (Dataset は DOMStringMap を返しますが、jQuery の data() は jQuery オブジェクトを返します。)

HTML データセット

ユーザーは、Spry HTML データセットを使用して、通常の HTML テーブルと別の構造化マークアップをデータ ソースとして使用できます。 HTML データセットは XML データセットと同様に機能しますが、利用可能な数百万のテーブルを利用できる点が異なります。 XML をテーブル構造にフラット化しているため、HTML データセットは Spry フレームワークの自然な拡張です。

HTML データセットには、変更に使用できる一連のユーティリティが付属しています。

• getURL() – この関数は、データセット関数 Object() { [ネイティブ コード] } 内の現在の URL の値を返します。
• setURL(“URL”) – この関数は、データセットで使用される新しいファイルへのパスを指定します。
• getSourceElementID() – データセットのベースとなるページ要素の ID を取得します。
• setSourceElementID(“theSourceID”) – このメソッドは、データ ソース ページ要素の ID を設定または変更するために使用されます。
• getRowSelector() は、現在使用されている RowSelector を返します。
• setRowSelector(“theRowSelector”) データセットの新しい RowSelector を設定します。
• getDataSelector() – 現在の DataSeelctor を返します。
• setDataSelector(“theDataSelector”)-データセットの新しい DataSelector を設定します。

例

有効な HTML コードの場合

<li class="prod" data-name="Dove Shampoo" data-country="Oslo"
data-lang="js" data-types="Hair">
<b>Hello Users:</b> <span>A newly launched Items</span>
</li>
var u1 = document.getElementsByTagName("li")[0];
var p1 = 0, span = user.getElementsByTagName("span")[0];
var content = [
{name: "country", prefix: "Product exported "},
{name: "type", prefix: "utilizing on hair "},
{name: "lang", prefix: "hello Oslo "}
];
u1.addEventListener("click", function(){
var content = content [ pos++ ];
span.innerHTML = content.prefix + u1.dataset[ content.name ];
}, false);

上記のコード スニペットでは、データセット プロパティは属性プロパティと同じように機能します。このコードは、コンテンツ接頭辞などの接頭辞を使用して強化され、将来的にはより適切に機能する可能性があります。キーは、要素と同様に、データセットのオブジェクト プロパティとして使用して、属性を設定および読み取ることができます。データセット.キー名。オブジェクト プロパティの括弧構文を使用して、要素と同様に属性を設定および読み取ることもできます。データセット[キー名]。 in 演算子を使用して、属性が存在するかどうかを確認できます。

データセット IDL 属性は、要素のすべての data-* 属性 (data-*/a>) に対する単純なアクセサーを提供します。データセットの取得 (dataset/a>) IDL 属性は、要素でこれらの属性を公開する次のアルゴリズムに関連付けられた DOMStringMap オブジェクトを返す必要があります。

<ahref="demo.html#domstringmap-0"> </a>

注意すべき点がいくつかあります:

• 属性名には data- 接頭辞が付加されなくなりました。
• 名前の前にある小文字のハイフンは削除され、その後の文字は大文字に変換されます。
• 他のキャラクターはそのままにしておきます。これは、小文字が続かないハイフンはそのままであることを意味します。

ブラウザのサポート

データセットはすべてのブラウザー (特に Internet Explorer の以前のバージョン) と互換性があるわけではありません。更新された互換性データを表で見てみましょう:

Support	Versions
Desktop	Chrome	Edge	Firefox	Internet Explorer
	6 and 8	Yes	6 higher	9
Mobile	Android	Edge	Opera	Samsung
	6	Yes	Nil	Nil

仕様・コメント

HTML5 では、標準ベースのホームページの開発をさらに簡単にするために状況が変更されており、大きな違いが生じるはずです。単純な XML ベースのマークアップでは学習曲線と失敗率が高すぎるため、このアプローチを適用する方法として data- 属性が作成されました。データ属性は名前空間やその他のものを置き換えようとするものではないことを理解することが重要です。これらは、上記の機能を *展開* するために必要なツールを提供します。 HTML で data- 属性を使用すると、RDFa、洗練された形式、さらにはある種の名前空間を実現できます。この仕様の最も魅力的な点は、ユーザーが使用を開始できるまで、ブラウザがこの仕様を実装するのを待つ必要がないことです。ユーザーが今日 HTML メタデータで data-prefix を使用し始めたとしても、それは将来的にも機能し続けるので安心してください。

次のアルゴリズムを実行して、DOMStringMap の名前と値のペアを取得します。

• list を空の名前と値のペアのリストにします。
• 最初の 5 文字が文字列「data-」で、残りの文字 (存在する場合) に ASCII の上位アルファが含まれない DOMStringMap の関連要素のコンテンツ属性ごとに、名前と値のペアをリストに追加します。これらの属性が要素の属性リストにリストされている順序になります。

基本的な HTML 標準の場合 – レビュー コメントは最新の HTML 5.1 からまったく変更されていません

バージョン HTML 5 – コメントのレビュー (以前の標準からの変更なし)

バージョン HTML 5.1 – HTML 5 からの影響はありません。

結論 – HTML のデータセット

最後に、カスタム データ属性は、アプリケーション データを Web ページに保存する便利な方法です。 HTML5 では、すべての HTML コンポーネントにカスタム データ属性を組み込むことができるようになりました。これらの属性が導入されるまでは、同様の結果 (データを要素に関連付ける) を達成する唯一の鍵は、要素内で CSS クラスを使用することでした。

以上がHTML のデータセットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。