diff options
Diffstat (limited to 'files/ja/web/api/documentorshadowroot')
10 files changed, 786 insertions, 0 deletions
diff --git a/files/ja/web/api/documentorshadowroot/caretpositionfrompoint/index.html b/files/ja/web/api/documentorshadowroot/caretpositionfrompoint/index.html new file mode 100644 index 0000000000..57168e3eea --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/caretpositionfrompoint/index.html @@ -0,0 +1,103 @@ +--- +title: DocumentOrShadowRoot.caretPositionFromPoint() +slug: Web/API/DocumentOrShadowRoot/caretPositionFromPoint +tags: + - API + - Document + - DocumentOrShadowRoot + - Method + - Reference + - ShadowRoot + - caretPositionFromPoint() +translation_of: Web/API/DocumentOrShadowRoot/caretPositionFromPoint +--- +<p>{{APIRef("CSSOM View")}}{{SeeCompatTable}}</p> + +<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>caretPositionFromPoint()</code></strong> プロパティは、 DOM ノードを含む {{domxref('CaretPosition')}} オブジェクトを、そのノード内のキャレットとキャレットの文字オフセットと共に返します。</span></p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">var caretPosition = document.caretPositionFromPoint(float x, float y);</pre> + +<h3 id="パラメータ">パラメータ</h3> + +<dl> + <dt><code>x</code></dt> + <dd>ポイントの水平座標。</dd> + <dt><code>y</code></dt> + <dd>ポイントの垂直座標。</dd> +</dl> + +<h3 id="返り値">返り値</h3> + +<p>{{domxref('CaretPosition')}} オブジェクト。</p> + +<h2 id="例">例</h2> + +<p>この例では、クリックした場所に改行を挿入します。そのコードはデモの下にあります。</p> + +<h3 id="Demo">Demo</h3> + +<p>{{EmbedLiveSample('Example', '100%', '300px')}}</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html notranslate"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, +sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, +sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. +Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js notranslate">function insertBreakAtPoint(e) { + var range; + var textNode; + var offset; + + if (document.caretPositionFromPoint) { + range = document.caretPositionFromPoint(e.clientX, e.clientY); + textNode = range.offsetNode; + offset = range.offset; + } else if (document.caretRangeFromPoint) { + range = document.caretRangeFromPoint(e.clientX, e.clientY); + textNode = range.startContainer; + offset = range.startOffset; + } + + // only split TEXT_NODEs + if (textNode.nodeType == 3) { + var replacement = textNode.splitText(offset); + var br = document.createElement('br'); + textNode.parentNode.insertBefore(br, replacement); + } +} + +window.onload = function (){ + var paragraphs = document.getElementsByTagName("p"); + for (i=0 ; i < paragraphs.length; i++) { + paragraphs[i].addEventListener("click", insertBreakAtPoint, false); + } +};</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#dom-document-caretpositionfrompoint','caretPositionFromPoint()')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.DocumentOrShadowRoot.caretPositionFromPoint")}}</p> diff --git a/files/ja/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/ja/web/api/documentorshadowroot/elementsfrompoint/index.html new file mode 100644 index 0000000000..a5337f576f --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/elementsfrompoint/index.html @@ -0,0 +1,102 @@ +--- +title: DocumentOrShadowRoot.elementsFromPoint() +slug: Web/API/DocumentOrShadowRoot/elementsFromPoint +tags: + - API + - Document + - DocumentOrShadowRoot + - Method + - Reference + - ShadowRoot + - elementsFromPoint + - elementsFromPoint() + - shadow dom + - メソッド +translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p><span class="seoSummary"><strong><code>elementsFromPoint()</code></strong> は {{domxref("DocumentOrShadowRoot")}} インターフェイスのメソッドで、指定された座標 (ビューポートからの相対) にあるすべての要素の配列を返します。</span></p> + +<p>これは {{domxref("DocumentOrShadowRoot.elementFromPoint", "elementFromPoint()")}} メソッドと同じような方法で動作します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">const elements = document.elementsFromPoint(<var>x</var>, <var>y</var>);</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<dl> + <dt><code><var>x</var></code></dt> + <dd>点の水平座標です。</dd> + <dt><code><var>y</var></code></dt> + <dd>点の垂直座標です。</dd> +</dl> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{domxref("Element")}} オブジェクトの配列です。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <p>Some text</p> +</div> +<p>Elements at point 30, 20:</p> +<div id="output"></div> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js;highlight[1]">let output = document.getElementById("output"); +if (document.elementsFromPoint) { + let elements = document.elementsFromPoint(30, 20); + for (var i = 0; i < elements.length; i++) { + output.textContent += elements[i].localName; + if (i < elements.length - 1) { + output.textContent += " < "; + } + } +} else { + output.innerHTML = "<span style=\"color: red;\">" + + "Browser does not support <code>document.elementsFromPoint()</code>" + + "</span>"; +}</pre> + +<p>{{EmbedLiveSample('Example', '420', '120')}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Shadow DOM','#dom-documentorshadowroot-elementsfrompoint','elementsFromPoint()')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'elementsFromPoint()')}}</td> + <td>{{Spec2('CSSOM View')}}</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.DocumentOrShadowRoot.elementsFromPoint")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</li> + <li>{{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}}</li> +</ul> diff --git a/files/ja/web/api/documentorshadowroot/fullscreenelement/index.html b/files/ja/web/api/documentorshadowroot/fullscreenelement/index.html new file mode 100644 index 0000000000..2c75a57840 --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/fullscreenelement/index.html @@ -0,0 +1,81 @@ +--- +title: DocumentOrShadowRoot.fullscreenElement +slug: Web/API/DocumentOrShadowRoot/fullscreenElement +tags: + - API + - Document + - DocumentOrShadowRoot + - Full-screen + - Fullscreen API + - Graphics + - Property + - Read-only + - Reference + - ShadowRoot + - fullscreenElement + - screen + - グラフィック + - 全画面 + - 読み取り専用 +translation_of: Web/API/DocumentOrShadowRoot/fullscreenElement +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><code><strong>DocumentOrShadowRoot.fullscreenElement</strong></code> プロパティは読み取り専用で、この文書内で現在全画面モードで表示されている {{ domxref("Element") }} を返し、全画面モードを使用していない場合は <code>null</code> を返します。</p> + +<p>このプロパティは読み取り専用ですが、変更されても (strict モードでも) 例外は発生しません。設定しても何もせず、無視されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>element</var> = <var>document</var>.fullscreenElement;</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>現在全画面モードになっている {{domxref("Element")}} オブジェクト。全画面モードがこの <code><var>document</var></code> で使用されていない場合、返値は <code>null</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は <code>isVideoInFullscreen()</code> 関数を表し、 <code>fullscreenElement</code> からの返値を調べています。文書が全画面モードで (<code>fullscreenElement</code> が <code>null</code> ではなく)、全画面の要素の {{domxref("Node.nodeName", "nodeName")}} が <code>VIDEO</code>、すなわち {{HTMLElement("video")}} 要素を表す場合、この関数は <code>true</code>、すなわち動画が全画面モードであることを表します。</p> + +<pre class="brush: js">function isVideoInFullscreen() { + if (document.fullscreenElement && document.fullscreenElement.nodeName == 'VIDEO') { + return true; + } + return false; +}</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("Fullscreen", "#dom-document-fullscreenelement", "Document.fullscreenElement")}}</td> + <td>{{Spec2("Fullscreen")}}</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.DocumentOrShadowRoot.fullscreenElement")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="/ja/docs/Web/API/Fullscreen_API/Guide">Fullscreen API ガイド</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ cssxref(":fullscreen") }} and {{cssxref("::backdrop")}}</li> + <li>{{HTMLElement("iframe")}} の {{ HTMLAttrXRef("allowfullscreen", "iframe") }} 属性</li> +</ul> diff --git a/files/ja/web/api/documentorshadowroot/getselection/index.html b/files/ja/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..e201ed0675 --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,87 @@ +--- +title: DocumentOrShadowRoot.getSelection() +slug: Web/API/DocumentOrShadowRoot/getSelection +tags: + - API + - DocumentOrShadowRoot + - Doument + - Method + - Reference + - ShadowRoot + - getSelection + - getSelection() + - shadow dom +translation_of: Web/API/DocumentOrShadowRoot/getSelection +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p><span class="seoSummary"><strong><code>getSelection()</code></strong> は {{DOMxRef("DocumentOrShadowRoot")}} インターフェイスのプロパティで、ユーザーが選択したテキストの範囲、またはキャレットの現在位置を表す {{DOMxRef("Selection")}} オブジェクトを返します。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var selection = documentOrShadowRootInstance.getSelection()</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし。</p> + +<h3 id="Returns" name="Returns">返値</h3> + +<p>{{DOMxRef("Selection")}} オブジェクト。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush:js">function foo() { + var selObj = document.getSelection(); + alert(selObj); + var selRange = selObj.getRangeAt(0); + // do stuff with the range +}</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<h3 id="String_representation_of_the_Selection_object" name="String_representation_of_the_Selection_object">Selection オブジェクトの文字列表現</h3> + +<p>JavaScript では、オブジェクトが string を取る関数 ({{DOMxRef("Window.alert()")}} など) に渡された場合、オブジェクトの {{JSxRef("Object.toString", "toString()")}} メソッドが呼び出され、関数にその返値が渡されます。これにより、プロパティやメソッドを持つ実際のオブジェクトであった場合、他の関数に使われると文字列になって現れることがあります。</p> + +<p>上記の例では、 <code>selObj.toString()</code> が呼び出されてから {{DOMxRef("Window.alert()")}} に渡されます。しかし、 JavaScript の <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a> のプロパティやメソッド、例えば <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> や <code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code> が {{DOMxRef("Selection")}} オブジェクトに対して呼び出されると、そのプロパティやメソッドを持っていないため、エラーが発生するか予期しない結果が返ることがあります。 <code>Selection</code> オブジェクトを文字列として扱うには、 <code>toString()</code> メソッドを直接呼び出してください。</p> + +<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre> + +<ul> + <li><code>selObj</code> は <code>Selection</code> オブジェクトです。</li> + <li><code>selectedText</code> は文字列 (選択中のテキスト) です。</li> +</ul> + +<h3 id="Related_objects" name="Related_objects">関連するオブジェクト</h3> + +<p>{{domxref("Window.getSelection()")}} を呼び出すと、 <code>Document.getSelection()</code> と同等の動作をします。</p> + +<p>Firefox において現在は <code>getSelection()</code> は {{htmlelement("input")}} 要素の中では動作しないことに注意してください。 {{domxref("HTMLInputElement.setSelectionRange()")}}) を使用することで回避できます。</p> + +<p><em>selection</em> と <em>focus</em> との違いにも注意してください。 {{domxref("Document.activeElement")}} はフォーカスを持つ要素を返します。</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName("Shadow DOM", "#extensions-to-the-documentorshadowroot-mixin", "DocumentOrShadowRoot")}}</td> + <td>{{Spec2("Shadow DOM")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<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.getSelection")}}</p> +</div> diff --git a/files/ja/web/api/documentorshadowroot/index.html b/files/ja/web/api/documentorshadowroot/index.html new file mode 100644 index 0000000000..41a6afbfa8 --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/index.html @@ -0,0 +1,78 @@ +--- +title: DocumentOrShadowRoot +slug: Web/API/DocumentOrShadowRoot +tags: + - API + - Document + - DocumentOrShadowRoot + - Reference + - ShadowRoot + - インターフェイス + - シャドウ DOM +translation_of: Web/API/DocumentOrShadowRoot +--- +<div>{{APIRef("Web Components")}}</div> + +<p><span class="seoSummary"><strong><code>DocumentOrShadowRoot</code></strong> は <a href="/ja/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM API</a> のミックスインで、文書とシャドウルートで共有される API を提供します。</span>以下の機能は {{DOMxRef("Document")}} と {{DOMxRef("ShadowRoot")}} の両方に含まれています。</p> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt> + <dd>シャドウツリー内でフォーカスを持っている {{DOMxRef('Element')}} を返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt> + <dd>この文書で現在全画面モードになっている {{DOMxRef('Element')}} を返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt> + <dd>ポインターがロックされている間、マウスイベントのターゲットとして設定された要素を返します。ロック待ちの場合、ポインターがロックされていない場合、ターゲットが別な文書である場合は <code>null</code> を返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt> + <dd>文書に明示的にリンクされているか、埋め込まれているスタイルシートの {{DOMxRef('CSSStyleSheet')}} オブジェクトの {{DOMxRef('StyleSheetList')}} を返します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt> + <dd>キャレットを含んでいる DOM ノードと、そのノード内におけるキャレットの文字のオフセットを含む {{DOMxRef('CaretPosition')}} オブジェクトを返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt> + <dd>指定された座標にある最上位の要素を返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt> + <dd>指定された座標にあるすべての要素の配列を返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt> + <dd>ユーザーによって選択されているテキストの範囲、またはキャレットの現在の位置を表す {{DOMxRef('Selection')}} オブジェクトを返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}} {{non-standard_inline}}</dt> + <dd>指定された座標にある最上位のノードを返します。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}} {{non-standard_inline}}</dt> + <dd>指定された座標にあるすべてのノードの配列を返します。</dd> +</dl> + +<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('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td>Shadow DOM で実装。</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td> + <td>{{Spec2('DOM WHATWG')}}</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.DocumentOrShadowRoot")}}</p> + +<p>[1] このインターフェイスの機能は {{DOMxRef("Document")}} オブジェクトにも実装されています。</p> diff --git a/files/ja/web/api/documentorshadowroot/mselementsfromrect/index.html b/files/ja/web/api/documentorshadowroot/mselementsfromrect/index.html new file mode 100644 index 0000000000..57d9c2b7b7 --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/mselementsfromrect/index.html @@ -0,0 +1,54 @@ +--- +title: DocumentOrShadowRoot.msElementsFromRect() +slug: Web/API/DocumentOrShadowRoot/msElementsFromRect +tags: + - API + - 'API:Microsoft Extensions' + - Method + - Non-standard + - Reference + - msElementsFromRect +translation_of: Web/API/DocumentOrShadowRoot/msElementsFromRect +--- +<div>{{APIRef("Microsoft Extensions")}}{{Non-standard_Header}}</div> + +<p><strong><code>msElementsFromRect</code></strong> メソッドは、left、 top、 width、 heighで定義された四角形の下にある要素のノードリストを返します。</p> + +<p>この独自プロパティは Internet Explorer と Microsoft Edge に固有のものです。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>object</em>.msElementsFromRect(left, top, width, height, retVal) +</pre> + +<h3 id="パラメータ">パラメータ</h3> + +<dl> + <dt><em>left </em>[in]</dt> + <dd>型: <strong>浮動小数点</strong></dd> + <dt><em>top</em>[in]</dt> + <dd>型: <strong>浮動小数点</strong></dd> + <dt><em>width</em>[in]</dt> + <dd>型: <strong>浮動小数点</strong></dd> + <dt><em>height </em>[in]</dt> + <dd>型: <strong>浮動小数点</strong></dd> + <dt><em>retVal </em>[out, reval]</dt> + <dd>型: <strong>ノードリスト</strong></dd> +</dl> + +<h2 id="例">例</h2> + +<p>特定のポイントの下にある全ての要素を検索するには、 <code>msElementsFromPoint(x, y)</code> を使用します。長方形を交差する全ての要素を見つけるには、 <code>msElementsFromRect(top, left, width, height)</code> を使用します。</p> + +<pre class="brush: js notranslate">var nodeList = document.msElementsFromRect(x,y,width,height) +var nodeList = document.msElementsFromPoint(x,y) +</pre> + +<p>返された nodeList には z-index でソートされているため、要素の相対的なスタック順序を確認できます。</p> + +<h2 id="See_Also" name="See_Also">関連項目</h2> + +<ul> + <li><a href="https://testdrive-archive.azurewebsites.net/HTML5/HitTest/Default.html">Advanced Hit Testing APIs Demo for msElementsFromPoint() and msElementsFromRect() </a></li> + <li><a href="/en-US/docs/Web/API/Microsoft_API_extensions">Microsoft API extensions </a></li> +</ul> diff --git a/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html b/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html new file mode 100644 index 0000000000..6b375f30d3 --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/nodefrompoint/index.html @@ -0,0 +1,78 @@ +--- +title: DocumentOrShadowRoot.nodeFromPoint() +slug: Web/API/DocumentOrShadowRoot/nodeFromPoint +tags: + - API + - DocumentOrShadowRoot + - Method + - Non-standard + - Reference + - nodeFromPoint + - メソッド + - 標準外 +translation_of: Web/API/DocumentOrShadowRoot +--- +<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 new file mode 100644 index 0000000000..7c5c0920cd --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/nodesfrompoint/index.html @@ -0,0 +1,82 @@ +--- +title: DocumentOrShadowRoot.nodesFromPoint() +slug: Web/API/DocumentOrShadowRoot/nodesFromPoint +tags: + - API + - DocumentOrShadowRoot + - Method + - Non-standard + - Reference + - nodesFromPoint + - メソッド +translation_of: Web/API/DocumentOrShadowRoot +--- +<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> diff --git a/files/ja/web/api/documentorshadowroot/pointerlockelement/index.html b/files/ja/web/api/documentorshadowroot/pointerlockelement/index.html new file mode 100644 index 0000000000..5806f9344e --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/pointerlockelement/index.html @@ -0,0 +1,60 @@ +--- +title: DocumentOrShadowRoot.pointerLockElement +slug: Web/API/DocumentOrShadowRoot/pointerLockElement +tags: + - API + - DOM + - Document + - Property + - Reference + - ShadowRoot + - mouse lock + - プロパティ + - マウスロック +translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>pointerLockElement</code></strong> は {{domxref("Document")}} および {{domxref("ShadowRoot")}} インターフェイスのプロパティで、要素をポインターがロックされている間のマウスイベントの対象として設定します。ロック待ち状態の場合、ポインターがロックされていない場合、対象が他の文書にある場合は <code>null</code> になります。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">var <var>element</var> = <var>document</var>.pointerLockElement; +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<p>{{domxref("Element")}} または <code>null</code>。</p> + +<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('Pointer Lock','#extensions-to-the-documentorshadowroot-mixin','pointerLockElement')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td><code>Document</code> インターフェイスを拡張</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.DocumentOrShadowRoot.pointerLockElement")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ domxref("Document.exitPointerLock()") }}</li> + <li>{{ domxref("Element.requestPointerLock()") }}</li> + <li><a href="/ja/docs/WebAPI/Pointer_Lock">Pointer Lock</a></li> +</ul> diff --git a/files/ja/web/api/documentorshadowroot/stylesheets/index.html b/files/ja/web/api/documentorshadowroot/stylesheets/index.html new file mode 100644 index 0000000000..48a1e7a169 --- /dev/null +++ b/files/ja/web/api/documentorshadowroot/stylesheets/index.html @@ -0,0 +1,61 @@ +--- +title: DocumentOrShadowRoot.styleSheets +slug: Web/API/DocumentOrShadowRoot/styleSheets +tags: + - API + - Document + - DocumentOrShadowRoot + - Property + - Reference + - ShadowRoot + - Stylesheets + - shadow dom +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +<div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div> + +<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} インターフェイスの <strong><code>styleSheets</code></strong> 読み取り専用プロパティは、 {{domxref('CSSStyleSheet')}} オブジェクトの {{domxref('StyleSheetList')}} を返します。ドキュメントに明示的にリンクまたは埋め込まれたスタイルシートの場合。</span></p> + +<h2 id="例">例</h2> + +<pre class="brush: js notranslate">function getStyleSheet(unique_title) { + for (var i=0; i<document.styleSheets.length; i++) { + var sheet = document.styleSheets[i]; + if (sheet.title == unique_title) { + return sheet; + } + } +} +</pre> + +<h3 id="Notes">Notes</h3> + +<p>返されるリストは次の順序で並べられます:</p> + +<ul> + <li>{{htmlelement("link")}} ヘッダから取得したスタイルシートが最初に配置され、ヘッダ順に並べ替えられます。</li> + <li>DOM から取得したスタイルシートは、<a href="https://dom.spec.whatwg.org/#concept-tree-order">ツリー順</a>にソートされた後に配置されます。</li> +</ul> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー実装状況">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.DocumentOrShadowRoot.styleSheets")}}</p> |