From 24af25b8f77c81ccf17c6981cd62d634a9bad751 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 14 Sep 2024 23:31:29 +0900 Subject: [PATCH] =?UTF-8?q?2024/07/26=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=9F=BA=E3=81=A5=E3=81=8D?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/api/htmlelement/dataset/index.md | 18 ++++++++++-------- files/ja/web/api/htmlelement/dir/index.md | 3 ++- files/ja/web/api/htmlelement/inert/index.md | 5 +++-- .../ja/web/api/htmlelement/innertext/index.md | 5 +++-- 4 files changed, 18 insertions(+), 13 deletions(-) diff --git a/files/ja/web/api/htmlelement/dataset/index.md b/files/ja/web/api/htmlelement/dataset/index.md index a70f1afd8b8682..2acc0c05c867a8 100644 --- a/files/ja/web/api/htmlelement/dataset/index.md +++ b/files/ja/web/api/htmlelement/dataset/index.md @@ -1,8 +1,9 @@ --- title: "HTMLElement: dataset プロパティ" +short-title: dataset slug: Web/API/HTMLElement/dataset l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 --- {{APIRef("HTML DOM")}} @@ -10,14 +11,14 @@ l10n: **`dataset`** は {{DOMxRef("HTMLElement")}} インターフェイスの読み取り専用プロパティで、要素に設定されたすべての[カスタムデータ属性](/ja/docs/Web/HTML/Global_attributes/data-*) (`data-*`) への読み取り/書き込みアクセスを提供します。これは文字列のマップである ({{domxref("DOMStringMap")}}) で、それぞれの `data-*` 属性の項目です。 > **メモ:** `dataset` プロパティ自体は読み取ることができますが、直接書き込むことはできません。 -> 代わりに、すべての書き込みは `dataset` 内の個々のプロパティに対して行う必要があり、それは data 属性を表します。 +> すべての書き込みは、個々の data 属性を表す `dataset` 内の個々のプロパティを表します。 -また、 HTML の `data-*` 属性とそれに対応する DOM `dataset.プロパティ` は同じ名前にはなりませんが、次のように常に近いものになります。 +また、 HTML の `data-*` 属性とそれに対応する DOM の `dataset.プロパティ` は同じ名前にはなりませんが、次のように常に近いものになります。 - HTML では - - : 属性の名前は、 `data-` で始まります。文字、数字、ダッシュ (`-`)、ドット (`.`)、コロン (`:`)、アンダースコア (`_`) のみを入れることができます。 ASCII 大文字の `A` から `Z` は小文字に変換されます。 + - : 属性の名前は、 `data-` で始まります。文字、数字、ダッシュ (`-`)、ドット (`.`)、コロン (`:`)、アンダースコア (`_`) のみを入れることができます。{{Glossary("ASCII")}} 大文字の `A` から `Z` は小文字に変換されます。 - JavaScript では - - : カスタムデータ属性のプロパティ名は、同じ HTML 属性の名前から `data-` の接頭辞を除いたものですが、そのプロパティのキャメルケース (camelCase) の名前であり、単一のダッシュ (`-`) を除いたものです。 + - : カスタムデータ属性のプロパティ名は、同じ HTML 属性の名前から `data-` の接頭辞を除いたものですが、そのプロパティの{{Glossary("camel_case", "キャメルケース")}}の名前であり、単一のダッシュ (`-`) を除いたものです。 以下の情報に加えて、[データ属性の使用](/ja/docs/Learn/HTML/Howto/Use_data_attributes)の記事に、HTML データ属性の使用方法に関するガイドがあります。 @@ -25,7 +26,7 @@ l10n: - ダッシュスタイルからキャメルケースへの変換 - - : カスタムデータ属性名は、次のルールに従って {{ domxref("DOMStringMap") }} 項目のキーに変換されます。 + - : カスタムデータ属性名は、次のルールに従って {{domxref("DOMStringMap") }} 項目のキーに変換されます。 1. すべての ASCII の大文字 (`A` から `Z` まで) を小文字にします。 2. 接頭辞の `data-` を（ダッシュを含め）削除します。 @@ -47,7 +48,8 @@ l10n: - 属性は dataset のオブジェクトプロパティのようにキャメルケース名（キー）を使用して、 `element.dataset.keyname` のように設定したり読み取ったりすることができます。 - 属性はブラケット構文を使用して、 `element.dataset['keyname']` のように設定したり読み取ったりすることもできます。 -- [`in` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/in)を使用して、特定の属性が存在するかどうかを確認できます。 +- [`in` 演算子](/ja/docs/Web/JavaScript/Reference/Operators/in)を `'keyname' in element.dataset` のように使用すると、特定の属性が存在するかどうかを確認できます。 + これは `dataset` の[プロトタイプチェーン](/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)を走査することになり、プロトタイプチェーンを汚染する可能性のある外部コードを持っている場合には安全ではないことに注意してください。例えば {{jsxref("Object/hasOwn", "Object.hasOwn(element.dataset, 'keyname')")}} や、単に `element.dataset.keyname !== undefined` かどうかを調べる方法などがあります。 ### 値の設定 @@ -85,7 +87,7 @@ delete el.dataset.dateOfBirth; // JS での結果: el.dataset.dateOfBirth === undefined // HTML での結果:
Carina Anand
-if (!("someDataAttr" in el.dataset)) { +if (el.dataset.someDataAttr === undefined) { el.dataset.someDataAttr = "mydata"; // JS での結果: 'someDataAttr' in el.dataset === true // HTML での結果:
Carina Anand
diff --git a/files/ja/web/api/htmlelement/dir/index.md b/files/ja/web/api/htmlelement/dir/index.md index 70e2d7b08a565e..bfc1bec61cb728 100644 --- a/files/ja/web/api/htmlelement/dir/index.md +++ b/files/ja/web/api/htmlelement/dir/index.md @@ -1,8 +1,9 @@ --- title: "HTMLElement: dir プロパティ" +short-title: dir slug: Web/API/HTMLElement/dir l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 --- {{ApiRef("HTML DOM")}} diff --git a/files/ja/web/api/htmlelement/inert/index.md b/files/ja/web/api/htmlelement/inert/index.md index 07605ed1d72093..a3531a31ce7040 100644 --- a/files/ja/web/api/htmlelement/inert/index.md +++ b/files/ja/web/api/htmlelement/inert/index.md @@ -1,8 +1,9 @@ --- title: "HTMLElement: inert プロパティ" +short-title: inert slug: Web/API/HTMLElement/inert l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 --- {{ APIRef("HTML DOM") }} @@ -10,7 +11,7 @@ l10n: {{domxref("HTMLElement")}} の **`inert`** プロパティは、この要素の [`inert`](/ja/docs/Web/HTML/Global_attributes/inert) 属性の値を反映します。論理値で、存在する場合は、フォーカスイベントや支援技術からのイベントを含む、要素に対するユーザーの入力イベントをブラウザーが「無視」するようにします。ブラウザーは、要素でのページ検索やテキスト選択も無視することができます。これは、モーダルのような UI を構築する際に、モーダルが表示されているときにフォーカスをモーダル内に「閉じ込める」場合に便利です。 > [!NOTE] -> 不活性コンテンツとその子孫は、すべてのユーザーにとってフォーカスも知覚もできないので、対話要素や重要なコンテンツを `inert` 属性を持つ要素内に入れ子にしてはいけません。 +> 対話要素や重要なコンテンツを `inert` 属性を持つ要素内に入れ子にしてはいけません。不活性コンテンツとその子孫は、すべてのユーザーにとってフォーカスも知覚もできないからです。 ## 値 diff --git a/files/ja/web/api/htmlelement/innertext/index.md b/files/ja/web/api/htmlelement/innertext/index.md index 499be6602052f1..38da971da7b6ef 100644 --- a/files/ja/web/api/htmlelement/innertext/index.md +++ b/files/ja/web/api/htmlelement/innertext/index.md @@ -1,8 +1,9 @@ --- title: "HTMLElement: innerText プロパティ" +short-title: innerText slug: Web/API/HTMLElement/innerText l10n: - sourceCommit: a3d9f61a8990ba7b53bda9748d1f26a9e9810b18 + sourceCommit: e9e2ec643ac69c132f31427a0b586ab2cf83ed58 --- {{APIRef("HTML DOM")}} @@ -12,7 +13,7 @@ l10n: ゲッターとしては、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。 セッターとしては、この要素の子要素を指定された値で置き換え、すべての改行を {{HTMLElement("br")}} 要素に変換します。 -> **メモ:** `innerText` は {{domxref("Node.textContent")}} と混同しやすいのですが、両者には重要な違いがあります。基本的に `innerText` はテキストがレンダリングされる表示を意識しますが、 `textContent` はそうではありません。 +> **メモ:** `innerText` は {{domxref("Node.textContent")}} と混同しやすいのですが、両者には重要な違いがあります。基本的に `innerText` はテキストがレンダリングされる外見を意識しますが、 `textContent` はそうではありません。 ## 値