initial commit

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">&lt;p&gt;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.&lt;/p&gt;</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 &lt; 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">&lt;div&gt;
+  &lt;p&gt;Some text&lt;/p&gt;
+&lt;/div&gt;
+&lt;p&gt;Elements at point 30, 20:&lt;/p&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+</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 &lt; elements.length; i++) {
+    output.textContent += elements[i].localName;
+    if (i &lt; elements.length - 1) {
+      output.textContent += " &lt; ";
+    }
+  }
+} else {
+  output.innerHTML = "&lt;span style=\"color: red;\"&gt;" +
+     "Browser does not support &lt;code&gt;document.elementsFromPoint()&lt;/code&gt;" +
+     "&lt;/span&gt;";
+}</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 &amp;&amp; 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">&lt;div&gt;
+  &lt;p&gt;Some text&lt;/p&gt;
+&lt;/div&gt;
+&lt;p&gt;Top node at point 30, 20:&lt;/p&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+</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 = "&lt;span style=\"color: red;\"&gt;" +
+     "Browser does not support &lt;code&gt;document.nodeFromPoint()&lt;/code&gt;" +
+     "&lt;/span&gt;";
+}</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">&lt;div&gt;
+  &lt;p&gt;Some text&lt;/p&gt;
+&lt;/div&gt;
+&lt;p&gt;Nodes at point 30, 20:&lt;/p&gt;
+&lt;div id="output"&gt;&lt;/div&gt;
+</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 &lt; nodes.length; i++) {
+    output.textContent += nodes[i].localName;
+    if (i &lt; nodes.length - 1) {
+      output.textContent += " &lt; ";
+    }
+  }
+} else {
+  output.innerHTML = "&lt;span style=\"color: red;\"&gt;" +
+     "Browser does not support &lt;code&gt;document.nodesFromPoint()&lt;/code&gt;" +
+     "&lt;/span&gt;";
+}</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&lt;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>