From 21d3adcde768d1b8eba07dcf85d2dd7927a0e506 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 15 Feb 2022 02:33:47 +0900 Subject: Web/API/HTMLElement/dataset を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/htmlelement/dataset/index.html | 146 ------------------------ files/ja/web/api/htmlelement/dataset/index.md | 146 ++++++++++++++++++++++++ 2 files changed, 146 insertions(+), 146 deletions(-) delete mode 100644 files/ja/web/api/htmlelement/dataset/index.html create mode 100644 files/ja/web/api/htmlelement/dataset/index.md (limited to 'files/ja/web') diff --git a/files/ja/web/api/htmlelement/dataset/index.html b/files/ja/web/api/htmlelement/dataset/index.html deleted file mode 100644 index bfdcffc940..0000000000 --- a/files/ja/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - HTMLElement - - Property - - Read-only - - Reference - - SVG - - SVG Custom Attributes - - SVG2 - - SVGElement - - dataset - - プロパティ - - 読取専用 -translation_of: Web/API/HTMLElement/dataset ---- -
{{APIRef("HTML DOM")}}
- -

dataset は {{DOMxRef("HTMLElement")}} インターフェイスのプロパティで、要素に設定されたすべてのカスタムデータ属性 (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")}}

- - - -

関連情報

- - diff --git a/files/ja/web/api/htmlelement/dataset/index.md b/files/ja/web/api/htmlelement/dataset/index.md new file mode 100644 index 0000000000..bfdcffc940 --- /dev/null +++ b/files/ja/web/api/htmlelement/dataset/index.md @@ -0,0 +1,146 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - HTMLElement + - Property + - Read-only + - Reference + - SVG + - SVG Custom Attributes + - SVG2 + - SVGElement + - dataset + - プロパティ + - 読取専用 +translation_of: Web/API/HTMLElement/dataset +--- +
{{APIRef("HTML DOM")}}
+ +

dataset は {{DOMxRef("HTMLElement")}} インターフェイスのプロパティで、要素に設定されたすべてのカスタムデータ属性 (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