diff options
Diffstat (limited to 'files/ja/web/api/documentorshadowroot')
5 files changed, 275 insertions, 162 deletions
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 +--- +<div>{{ApiRef}}</div> + +<h2 id="Summary" name="Summary">概要</h2> + +<p>Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.</p> + +<p>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 <code>selectionStart</code> and <code>selectionEnd</code> properties. Other times the focused element might be a {{HTMLElement("select")}} element (menu) or an {{HTMLElement("input")}} element, of <code>type</code> button, checkbox or radio.</p> + +<div class="note"><strong>注記:</strong> On Mac, elements that aren't text input elements tend not to get focus assigned to them.</div> + +<p>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).</p> + +<p>Do not confuse focus with a selection over the document, consisting mostly of static text nodes. See {{domxref("window.getSelection()")}} for that.</p> + +<p>When there is no selection, the active element is the page's {{HTMLElement("body")}}.</p> + +<p>{{Note("This attribute is part of the in-development HTML 5 specification.")}}</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre>var curElement = document.activeElement; +</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!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.<strong>activeElement</strong>; + var selection = selectedTextArea.value.substring( + selectedTextArea.<strong>selectionStart</strong>, selectedTextArea.<strong>selectionEnd</strong>); + 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> +</pre> + +<p><a href="https://jsfiddle.net/w9gFj">JSFiddle で確認</a></p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></li> +</ul> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>2</td> + <td>3.0</td> + <td>4</td> + <td>9.6</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> 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 +--- +<div> + {{ApiRef()}} {{Fx_minversion_header(3)}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>文書の左上を基点として指定された座標上にある要素を返します。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox"><var>element</var> = document.elementFromPoint(<i>x</i>,<i>y</i>);</pre> +<ul> + <li><code>element</code> には <a href="/ja/docs/DOM/element">element</a> オブジェクトが入ります。</li> + <li><code>x</code> と <code>y</code> には取得したい要素の座標を指定してください。</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:html"><!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> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p>指定された座標にある要素が別のドキュメント(例えば iframe 内にあるサブドキュメント) に属する場合、指定された座標にあるドキュメントの DOM 要素 (iframe) を返します。もし指定された座標にある要素が匿名あるいは textbox のスクロールバーのように XBL によって生成された内容の場合、指定された座標にある要素を基点として、匿名ではない最初の親要素(例えば textbox)が返されます。</p> +<p>指定された座標がドキュメントの表示外にあるか、座標のどちらかに負の値が設定されている場合は <code>NULL</code> を返します。</p> +<p>{{Note("XUL ドキュメントからは onload イベントが発生するまでは、このメソッドを使用してはいけません。")}}</p> +<h2 id="Specification" name="Specification">仕様</h2> +<ul> + <li>仮仕様: <a class="external" href="http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint"><code>elementFromPoint</code></a></li> +</ul> 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 +--- +<p>{{ SeeCompatTable() }}{{APIRef("Web Animations")}}</p> + +<p><code>getAnimations()</code> メソッドは {{domxref("Document")}} インターフェイスのメソッドで、この文書の配下にあるターゲット要素にあるすべての {{domxref("Animation")}} オブジェクトの配列を返します。この配列には <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>, <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>, <a href="/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション</a> が含まれます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>allAnimations</var> = <var>Document</var>.getAnimations(); +</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{domxref("Animation")}} オブジェクトの {{jsxref("Array")}} で、それぞれの要素は呼び出された {{domxref("Document")}} の配下にある要素に現在関連付けられているアニメーション1つを表します。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次のコードスニペットは、ページ上のすべてのアニメーションの {{domxref("Animation.playbackRate")}} を半分にすることで速度をゆっくりにします。</p> + +<pre class="brush: js notranslate">document.getAnimations().forEach( + function (animation) { + animation.playbackRate *= .5; + } +);</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Web Animations', '#dom-documentorshadowroot-getanimations', 'document.getAnimations()' )}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.Document.getAnimations")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Web_Animations_API">ウェブアニメーション API</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a></li> + <li>{{domxref("Element.getAnimations()")}} - 単一の要素 ({{domxref("Element")}}) とその子孫にあるアニメーションのみを読み取る</li> + <li>{{domxref("Animation")}}</li> +</ul> 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 ---- -<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> - -<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>nodeFromPoint()</code></strong> プロパティは、 (ビューポートからの相対で) 指定された座標にある最上位のノードを返します。</span></p> - -<p>現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var node = document.nodeFromPoint(x, y);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>x</code></dt> - <dd>点の水平座標を表す倍精度浮動小数値。</dd> - <dt><code>y</code></dt> - <dd>点の垂直座標を表す倍精度浮動小数値。</dd> -</dl> - -<h3 id="Returns" name="Returns">返値</h3> - -<p>{{domxref('Node')}} オブジェクト。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML_Content" name="HTML_Content">HTML Content</h3> - -<pre class="brush: html"><div> - <p>Some text</p> -</div> -<p>Top node at point 30, 20:</p> -<div id="output"></div> -</pre> - -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js;highlight[1]">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>"; -}</pre> - -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>現在はどの仕様書にも含まれていません。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("api.DocumentOrShadowRoot.nodeFromPoint")}}</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}}</li> - <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li> -</ul> 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 ---- -<div>{{APIRef("DOM")}}{{Non-standard_header}}</div> - -<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>nodesFromPoint()</code></strong> プロパティは、 (ビューポートからの相対で) 指定された座標のすべてのノードの配列を返します。</span></p> - -<p>現在のところ、このメソッドは Firefox でしか実装されておらず、クロムコードでのみ利用できます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox">var nodes = document.nodesFromPoint(x, y);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt>x</dt> - <dd>点の水平座標。</dd> - <dt>y</dt> - <dd>点の垂直座標。</dd> -</dl> - -<h3 id="Returns" name="Returns">返値</h3> - -<p>{{domxref('Node')}} オブジェクトの配列。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> - -<pre class="brush: html"><div> - <p>Some text</p> -</div> -<p>Nodes at point 30, 20:</p> -<div id="output"></div> -</pre> - -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> - -<pre class="brush: js;highlight[1]">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>"; -}</pre> - -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<p>現在はどの仕様書にも含まれていません。</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> - -<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> - -<p>{{Compat("api.DocumentOrShadowRoot.nodesFromPoint")}}</p> - -<h2 id="See_Also" name="See_Also">関連情報</h2> - -<ul> - <li>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}}</li> - <li>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</li> -</ul> |