From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../documentorshadowroot/activeelement/index.html | 144 +++++++++++++++++++++ .../elementfrompoint/index.html | 50 +++++++ .../documentorshadowroot/getanimations/index.html | 81 ++++++++++++ .../documentorshadowroot/nodefrompoint/index.html | 79 ----------- .../documentorshadowroot/nodesfrompoint/index.html | 83 ------------ 5 files changed, 275 insertions(+), 162 deletions(-) create mode 100644 files/ja/web/api/documentorshadowroot/activeelement/index.html create mode 100644 files/ja/web/api/documentorshadowroot/elementfrompoint/index.html create mode 100644 files/ja/web/api/documentorshadowroot/getanimations/index.html delete mode 100644 files/ja/web/api/documentorshadowroot/nodefrompoint/index.html delete mode 100644 files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html (limited to 'files/ja/web/api/documentorshadowroot') diff --git a/files/ja/web/api/documentorshadowroot/activeelement/index.html b/files/ja/web/api/documentorshadowroot/activeelement/index.html new file mode 100644 index 0000000000..31c1b2bc7f --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/activeelement/index.html @@ -0,0 +1,144 @@ +--- +title: document.activeElement +slug: Web/API/Document/activeElement +tags: + - DOM + - Focus + - Gecko + - HTML5 + - NeedsTranslation + - 要更新 +translation_of: Web/API/DocumentOrShadowRoot/activeElement +translation_of_original: Web/API/Document/activeElement +--- +
{{ApiRef}}
+ +

概要

+ +

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

+ +

Often this will return an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} object, if it has the text selection at the time.  If so, you can get more detail by using the element's selectionStart and selectionEnd properties.  Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of type button, checkbox or radio.

+ +
注記: On Mac, elements that aren't text input elements tend not to get focus assigned to them.
+ +

Typically a user can press the tab key to move the focus around the page among focusable elements, and use the space bar to activate it (press a button, choose a radio).

+ +

Do not confuse focus with a selection over the document, consisting mostly of static text nodes.  See {{domxref("window.getSelection()")}} for that.

+ +

When there is no selection, the active element is the page's {{HTMLElement("body")}}.

+ +

{{Note("This attribute is part of the in-development HTML 5 specification.")}}

+ +

構文

+ +
var curElement = document.activeElement;
+
+ +

例

+ +
<!DOCTYPE HTML>
+<html>
+<head>
+    <script type="text/javascript" charset="utf-8">
+    function init() {
+
+        function onMouseUp(e) {
+            console.log(e);
+            var outputElement = document.getElementById('output-element');
+            var outputText = document.getElementById('output-text');
+            var selectedTextArea = document.activeElement;
+            var selection = selectedTextArea.value.substring(
+            selectedTextArea.selectionStart, selectedTextArea.selectionEnd);
+            outputElement.innerHTML = selectedTextArea.id;
+            outputText.innerHTML = selection;
+        }
+
+        document.getElementById("ta-example-one").addEventListener("mouseup", onMouseUp, false);
+        document.getElementById("ta-example-two").addEventListener("mouseup", onMouseUp, false);
+    }
+    </script>
+</head>
+<body onload="init()">
+<div>
+    Select some text from one of the Textareas below:
+</div>
+<form id="frm-example" action="#" accept-charset="utf-8">
+<textarea name="ta-example-one" id="ta-example-one" rows="8" cols="40">
+This is Textarea Example One:
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt, lorem a porttitor molestie, odio nibh iaculis libero, et accumsan nunc orci eu dui.
+</textarea>
+<textarea name="ta-example-two" id="ta-example-two" rows="8" cols="40">
+This is Textarea Example Two:
+Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.
+</textarea>
+</form>
+Active Element Id: <span id="output-element"></span><br/>
+Selected Text: <span id="output-text"></span>
+
+</body>
+</html>
+
+ +

JSFiddle で確認

+ +

注記

+ +

Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).

+ +

仕様

+ + + +

ブラウザ実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート23.049.64.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

 

diff --git a/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html b/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html new file mode 100644 index 0000000000..a24f1ce63a --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html @@ -0,0 +1,50 @@ +--- +title: document.elementFromPoint +slug: Web/API/Document/elementFromPoint +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +translation_of_original: Web/API/Document/elementFromPoint +--- +
+ {{ApiRef()}} {{Fx_minversion_header(3)}}
+

概要

+

文書の左上を基点として指定された座標上にある要素を返します。

+

構文

+
element = document.elementFromPoint(x,y);
+ +

例

+
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<title>elementFromPoint の使用例</title>
+
+<script>
+function changeColor(newColor) {
+  elem = document.elementFromPoint(2, 2);
+  elem.style.color = newColor;
+}
+</script>
+</head>
+
+
+<body>
+<p id="para1">色は匂へど　散りぬるを……</p>
+<button onclick="changeColor('blue');">blue</button>
+<button onclick="changeColor('red');">red</button>
+</body>
+</html>
+
+

注記

+

指定された座標にある要素が別のドキュメント(例えば iframe　内にあるサブドキュメント) に属する場合、指定された座標にあるドキュメントの DOM 要素 (iframe) を返します。もし指定された座標にある要素が匿名あるいは textbox のスクロールバーのように XBL によって生成された内容の場合、指定された座標にある要素を基点として、匿名ではない最初の親要素(例えば textbox)が返されます。

+

指定された座標がドキュメントの表示外にあるか、座標のどちらかに負の値が設定されている場合は NULL を返します。

+

{{Note("XUL ドキュメントからは onload イベントが発生するまでは、このメソッドを使用してはいけません。")}}

+

仕様

+ diff --git a/files/ja/web/api/documentorshadowroot/getanimations/index.html b/files/ja/web/api/documentorshadowroot/getanimations/index.html new file mode 100644 index 0000000000..eeb45f404e --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/getanimations/index.html @@ -0,0 +1,81 @@ +--- +title: Document.getAnimations() +slug: Web/API/Document/getAnimations +tags: + - API + - Animation + - CSS + - CSS Animations + - CSS Transitions + - Document + - Experimental + - Method + - Reference + - Transitions + - Web Animations + - getAnimations + - waapi + - web animations api +translation_of: Web/API/DocumentOrShadowRoot/getAnimations +--- +

{{ SeeCompatTable() }}{{APIRef("Web Animations")}}

+ +

getAnimations() メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には CSS アニメーション, CSS トランジション, ウェブアニメーション が含まれます。

+ +

構文

+ +
var allAnimations = Document.getAnimations();
+
+ +

引数

+ +

なし。

+ +

返値

+ +

{{domxref("Animation")}} オブジェクトの {{jsxref("Array")}} で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション1つを表します。

+ +

例

+ +

次のコードスニペットは、ページ上のすべてのアニメーションの {{domxref("Animation.playbackRate")}} を半分にすることで速度をゆっくりにします。

+ +
document.getAnimations().forEach(
+  function (animation) {
+    animation.playbackRate *= .5;
+  }
+);
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'document.getAnimations()' )}}{{Spec2('Web Animations')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Document.getAnimations")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html b/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html deleted file mode 100644 index a7953136e6..0000000000 --- a/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: DocumentOrShadowRoot.nodeFromPoint() -slug: Web/API/DocumentOrShadowRoot/nodeFromPoint -tags: - - API - - DocumentOrShadowRoot - - Method - - Non-standard - - Reference - - nodeFromPoint - - メソッド - - 標準外 -translation_of: Web/API/DocumentOrShadowRoot -translation_of_original: Web/API/DocumentOrShadowRoot/nodeFromPoint ---- -
{{APIRef("DOM")}}{{Non-standard_header}}
- -

{{domxref("DocumentOrShadowRoot")}} インターフェイスの nodeFromPoint() プロパティは、 (ビューポートからの相対で) 指定された座標にある最上位のノードを返します。

- -

現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。

- -

構文

- -
var node = document.nodeFromPoint(x, y);
- -

引数

- -
-
x
-
点の水平座標を表す倍精度浮動小数値。
-
y
-
点の垂直座標を表す倍精度浮動小数値。
-
- -

返値

- -

{{domxref('Node')}} オブジェクト。

- -

例

- -

HTML Content

- -
<div>
-  <p>Some text</p>
-</div>
-<p>Top node at point 30, 20:</p>
-<div id="output"></div>
-
- -

JavaScript Content

- -
var output = document.getElementById("output");
-if (document.nodeFromPoint) {
-  var node = document.nodeFromPoint(30, 20);
-    output.textContent += node.localName;
-} else {
-  output.innerHTML = "<span style=\"color: red;\">" +
-     "Browser does not support <code>document.nodeFromPoint()</code>" +
-     "</span>";
-}
- -

{{EmbedLiveSample('Example', '420', '120')}}

- -

仕様書

- -

現在はどの仕様書にも含まれていません。

- -

ブラウザーの対応

- - - -

{{Compat("api.DocumentOrShadowRoot.nodeFromPoint")}}

- -

関連情報

- - diff --git a/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html b/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html deleted file mode 100644 index d3f79b8d11..0000000000 --- a/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: DocumentOrShadowRoot.nodesFromPoint() -slug: Web/API/DocumentOrShadowRoot/nodesFromPoint -tags: - - API - - DocumentOrShadowRoot - - Method - - Non-standard - - Reference - - nodesFromPoint - - メソッド -translation_of: Web/API/DocumentOrShadowRoot -translation_of_original: Web/API/DocumentOrShadowRoot/nodesFromPoint ---- -
{{APIRef("DOM")}}{{Non-standard_header}}
- -

{{domxref("DocumentOrShadowRoot")}} インターフェイスの nodesFromPoint() プロパティは、 (ビューポートからの相対で) 指定された座標のすべてのノードの配列を返します。

- -

現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。

- -

構文

- -
var nodes = document.nodesFromPoint(x, y);
- -

引数

- -
-
x
-
点の水平座標。
-
y
-
点の垂直座標。
-
- -

返値

- -

{{domxref('Node')}} オブジェクトの配列。

- -

例

- -

HTML コンテンツ

- -
<div>
-  <p>Some text</p>
-</div>
-<p>Nodes at point 30, 20:</p>
-<div id="output"></div>
-
- -

JavaScript コンテンツ

- -
var output = document.getElementById("output");
-if (document.nodesFromPoint) {
-  var nodes = document.nodesFromPoint(30, 20);
-  for(var i = 0; i < nodes.length; i++) {
-    output.textContent += nodes[i].localName;
-    if (i < nodes.length - 1) {
-      output.textContent += " < ";
-    }
-  }
-} else {
-  output.innerHTML = "<span style=\"color: red;\">" +
-     "Browser does not support <code>document.nodesFromPoint()</code>" +
-     "</span>";
-}
- -

{{EmbedLiveSample('Example', '420', '120')}}

- -

仕様書

- -

現在はどの仕様書にも含まれていません。

- -

ブラウザーの対応

- - - -

{{Compat("api.DocumentOrShadowRoot.nodesFromPoint")}}

- -

関連情報

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