From 68b6aba0b2a1f8005e1c181c06e40eea4af9cd2f Mon Sep 17 00:00:00 2001 From: MDN Date: Sun, 4 Jul 2021 00:36:02 +0000 Subject: [CRON] sync translated content --- .../api/htmlorforeignelement/dataset/index.html | 147 +++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 files/ja/orphaned/web/api/htmlorforeignelement/dataset/index.html (limited to 'files/ja/orphaned/web/api') diff --git a/files/ja/orphaned/web/api/htmlorforeignelement/dataset/index.html b/files/ja/orphaned/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..bfbc6e6f90 --- /dev/null +++ b/files/ja/orphaned/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,147 @@ +--- +title: HTMLOrForeignElement.dataset +slug: orphaned/Web/API/HTMLOrForeignElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - HTMLOrForeignElement + - Property + - Read-only + - Reference + - SVG + - SVG Custom Attributes + - SVG2 + - SVGElement + - dataset + - プロパティ + - 読取専用 +translation_of: Web/API/HTMLOrForeignElement/dataset +original_slug: Web/API/HTMLOrForeignElement/dataset +--- +
{{APIRef("HTML DOM")}}
+ +

dataset は {{DOMxRef("HTMLOrForeignElement")}} インターフェイスのプロパティで、要素に設定されたすべてのカスタムデータ属性 (data-*) への読み取り/書き込みアクセスを提供します。 このアクセスは、 HTML と DOM の両方の中で利用できます。これは {{domxref("DOMString")}} のマップ ({{domxref("DOMStringMap")}}) で、1つのカスタムデータ属性が1つのエントリに対応します。なお、 dataset プロパティ自体は読み取ることができますが、直接書き込むことはできません。代わりに、すべての書き込みは dataset 内の個々のプロパティに対して行われる必要があり、それはデータ属性を表します。また、 HTML の data-属性とそれに対応する DOM dataset.プロパティ　は同じ名前を共有しませんが、次のように常に近いものになります。

+ + + +

以下の情報に加えて、データ属性の使用の記事に、HTML データ属性の使用方法に関するガイドがあります。

+ +

名前変換

+ +

ダッシュスタイルからキャメルケースへ: カスタムデータ属性名は、次のルールに従って {{ domxref("DOMStringMap") }} エントリのキーに変換されます。

+ + + +

キャメルケースからダッシュスタイルへ: キーを属性名にマッピングする逆の変換では、次のルールが使用されます。

+ + + +

上記の規則の制約事項により、2つの変換が互いに逆変換になります。

+ +

例えば、data-abc-def という名前の属性は、キー abcDef に対応します。

+ + + +

値へのアクセス

+ + + +

値の設定

+ + + +

構文

+ +
const dataAttrMap = element.dataset
+
+ +

値

+ +

{{domxref("DOMStringMap")}} です。

+ +

例

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id === 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// データ属性の設定
+el.dataset.dateOfBirth = '1960-10-03';
+// 結果: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// 結果: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// 結果: 'someDataAttr' in el.dataset === true
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}{{SpecName('HTML WHATWG')}} のスナップショット、 {{SpecName('HTML5 W3C')}} からの変更なし
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}{{SpecName('HTML WHATWG')}} のスナップショット、初回定義
+ +

ブラウザーの互換性

+ +

{{Compat("api.HTMLElement.dataset")}}

+ + + +

関連情報

+ + -- cgit v1.2.3-54-g00ecf