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 | 146 --------------------- 1 file changed, 146 deletions(-) delete mode 100644 files/ja/web/api/htmlorforeignelement/dataset/index.html (limited to 'files/ja/web/api/htmlorforeignelement/dataset/index.html') diff --git a/files/ja/web/api/htmlorforeignelement/dataset/index.html b/files/ja/web/api/htmlorforeignelement/dataset/index.html deleted file mode 100644 index e2e9b5df30..0000000000 --- a/files/ja/web/api/htmlorforeignelement/dataset/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: HTMLOrForeignElement.dataset -slug: 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 ---- -
{{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