initial commit

6 files changed, 426 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/documentorshadowroot/activeelement/index.html b/files/zh-cn/web/api/documentorshadowroot/activeelement/index.html
new file mode 100644
index 0000000000..90b67fbf5c
--- /dev/null
+++ b/files/zh-cn/web/api/documentorshadowroot/activeelement/index.html
@@ -0,0 +1,86 @@
+---
+title: DocumentOrShadowRoot.activeElement
+slug: Web/API/DocumentOrShadowRoot/activeElement
+translation_of: Web/API/DocumentOrShadowRoot/activeElement
+---
+<div>{{APIRef("Shadow DOM")}}</div>
+
+<p><span class="seoSummary">{{domxref("Document")}} 和 {{domxref("ShadowRoot")}} 接口的 <strong><code>activeElement</code></strong> 只读属性，用来返回当前在DOM或者shadow DOM树中处于聚焦状态的{{domxref("Element")}}。</span></p>
+
+<p>通常情况下，如果 {{domxref("HTMLInputElement")}} 或者 {{domxref("HTMLTextAreaElement")}}元素中有文字被选中时， <code>activeElement</code>属性就会返回该元素 。这时，你可以调用该元素的{{domxref("Document.selectionStart", "selectionStart")}} 和 {{domxref("Document.selectionEnd", "selectionEnd")}} 属性获取更多选中文字的信息. 其他情况下，焦点元素也可能是{{HTMLElement("select")}}元素 (menu) 或者一个别的 {{HTMLElement("input")}} 元素, 比如 <code>"button"</code>, <code>"checkbox"</code>, 或者 <code>"radio"</code>.</p>
+
+<p>通常用户可以使用tab键来切换页面中的焦点元素获得焦点, 使用空格键使元素active (比如按下一个按钮或者 切换一个 radio). 具体哪些元素可以获得焦点与系统和浏览器的设置有关。比如, 在 macOS 系统上, 不是text input元素默认情况下是不能获得焦点的。</p>
+
+<div class="note">
+<p><strong>Note:</strong> Focus (可收到input事件的元素) 和 selection (目前页面被高亮的部分)不是一回事. 你可以通过 {{domxref("window.getSelection()")}}获取当前用户选择的文本.</p>
+</div>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate"><em>element</em> = <em>DocumentOrShadowRoot</em>.activeElement</pre>
+
+<h3 id="Value">Value</h3>
+
+<p>当前获得焦点的 {{domxref('Element')}} ，如果没有焦点元素，会返回 {{HTMLElement("body")}} 或者 <code>null</code> 。</p>
+
+<h2 id="Example">Example</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;Select some text from one of the text areas below:&lt;/p&gt;
+
+&lt;form&gt;
+  &lt;textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40"&gt;This is Text Area 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.&lt;/textarea&gt;
+  &lt;textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40"&gt;This is Text Area Two. Fusce ullamcorper, nisl ac porttitor adipiscing, urna orci egestas libero, ut accumsan orci lacus laoreet diam. Morbi sed euismod diam.&lt;/textarea&gt;
+&lt;/form&gt;
+
+&lt;p&gt;Active element ID: &lt;b id="output-element"&gt;&lt;/b&gt;&lt;/p&gt;
+&lt;p&gt;Selected text: &lt;b id="output-text"&gt;&lt;/b&gt;&lt;/p&gt;</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js notranslate">function onMouseUp(e) {
+  const activeTextarea = document.activeElement;
+  const selection = activeTextarea.value.substring(
+    activeTextarea.selectionStart, activeTextarea.selectionEnd
+  );
+
+  const outputElement = document.getElementById('output-element');
+  const outputText = document.getElementById('output-text');
+  outputElement.innerHTML = activeTextarea.id;
+  outputText.innerHTML = selection;
+}
+
+const textarea1 = document.getElementById('ta-example-one');
+const textarea2 = document.getElementById('ta-example-two');
+textarea1.addEventListener('mouseup', onMouseUp, false);
+textarea2.addEventListener('mouseup', onMouseUp, false);</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{ EmbedLiveSample('Example', '400', '400') }}</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'interaction.html#dom-document-activeelement', 'activeElement')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.activeElement")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/documentorshadowroot/elementfrompoint/index.html b/files/zh-cn/web/api/documentorshadowroot/elementfrompoint/index.html
new file mode 100644
index 0000000000..e7e96436dc
--- /dev/null
+++ b/files/zh-cn/web/api/documentorshadowroot/elementfrompoint/index.html
@@ -0,0 +1,85 @@
+---
+title: DocumentOrShadowRoot.elementFromPoint()
+slug: Web/API/DocumentOrShadowRoot/elementFromPoint
+translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint
+---
+<p>{{APIRef("Shadow DOM")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary">{{domxref("DocumentOrShadowRoot")}} 接口的 <strong><code>elementFromPoint()</code></strong> 方法返回给定坐标点下最上层的 {{domxref('element')}} 元素。 </span></p>
+
+<p>If the element at the specified point belongs to another document (for example, an iframe's subdocument), the subdocument's parent element is returned (the iframe itself). If the element at the given point is anonymous or XBL generated content, such as a textbox's scroll bars, then the first non-anonymous ancestor element (for example, the textbox) is returned.</p>
+
+<p>如果指定的坐标点在文档的可视范围外，或者两个坐标都是负数，那么结果返回 <code>null</code>。</p>
+
+<p>If you need to find the specific position inside the element, use {{domxref("Document.caretPositionFromPoint()")}}.</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox notranslate">var element = document.elementFromPoint(x, y);</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>坐标点的横坐标。</dd>
+ <dt>y</dt>
+ <dd>坐标点的纵坐标。</dd>
+</dl>
+
+<h3 id="Returns">Returns</h3>
+
+<p>在给定的坐标点处的顶端 {{domxref("Element")}}（译者注：如果元素层叠的话，返回最上层的元素）。</p>
+
+<h2 id="Example" name="Example">Example</h2>
+
+<pre class="brush:html notranslate" id="ExampleCode">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+&lt;head&gt;
+&lt;title&gt;elementFromPoint example&lt;/title&gt;
+
+&lt;script&gt;
+function changeColor(newColor) {
+  elem = document.elementFromPoint(2, 2);
+  elem.style.color = newColor;
+}
+&lt;/script&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+&lt;p id="para1"&gt;Some text here&lt;/p&gt;
+&lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
+&lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<h3 id="Demo">Demo</h3>
+
+<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/elementFromPoint') }}</p>
+
+
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.elementFromPoint")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/zh-cn/web/api/documentorshadowroot/elementsfrompoint/index.html
new file mode 100644
index 0000000000..6036115eaf
--- /dev/null
+++ b/files/zh-cn/web/api/documentorshadowroot/elementsfrompoint/index.html
@@ -0,0 +1,50 @@
+---
+title: DocumentOrShadowRoot.elementsFromPoint()
+slug: Web/API/DocumentOrShadowRoot/elementsFromPoint
+translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint
+---
+<p>{{APIRef("Shadow DOM")}}{{SeeCompatTable}}</p>
+
+<p><span class="seoSummary"><strong><code>elementsFromPoint()</code></strong> 是 {{domxref("DocumentOrShadowRoot")}} 下的一个函数，该函数返还在特定坐标点下的HTML元素数组。</span></p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var elements = document.elementsFromPoint(x, y);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt>x</dt>
+ <dd>坐标点的水平坐标值</dd>
+ <dt>y</dt>
+ <dd>坐标点的垂向坐标值</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>一个包含 {{domxref('element')}} 对象的数组.</p>
+
+<h2 id="其他说明">其他说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Shadow DOM','','elementsFromPoint()')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div>
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/documentorshadowroot/getselection/index.html b/files/zh-cn/web/api/documentorshadowroot/getselection/index.html
new file mode 100644
index 0000000000..7110d24d21
--- /dev/null
+++ b/files/zh-cn/web/api/documentorshadowroot/getselection/index.html
@@ -0,0 +1,75 @@
+---
+title: DocumentOrShadowRoot.getSelection()
+slug: Web/API/DocumentOrShadowRoot/getSelection
+translation_of: Web/API/DocumentOrShadowRoot/getSelection
+---
+<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div>
+
+<p><span class="seoSummary">The <strong><code>getSelection()</code></strong> property of the {{DOMxRef("DocumentOrShadowRoot")}} interface returns a {{DOMxRef("Selection")}} object representing the range of text selected by the user, or the current position of the caret.</span></p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox">var selection = documentOrShadowRootInstance.getSelection()</pre>
+
+<h3 id="Parameters">Parameters</h3>
+
+<p>None.</p>
+
+<h3 id="Returns">Returns</h3>
+
+<p>A {{DOMxRef("Selection")}} object.</p>
+
+<h2 id="Example" name="Example">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">Notes</h2>
+
+<h3 id="String_representation_of_the_Selection_object">String representation of the Selection object</h3>
+
+<p>In JavaScript, when an object is passed to a function expecting a string (like {{DOMxRef("Window.alert()")}}), the object's {{JSxRef("Object.toString", "toString()")}} method is called and the returned value is passed to the function. This can make the object appear to be a string when used with other functions when it is really an object with properties and methods.</p>
+
+<p>In the above example, <code>selObj.toString()</code> is automatically called when it is passed to {{DOMxRef("Window.alert()")}}. However, attempting to use a JavaScript <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" title="JS/String">String</a> property or method such as <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/length" title="JS/String.length">length</a></code> or <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr" title="JS/String.substr">substr</a></code> directly on a {{DOMxRef("Selection")}} object results in an error if it does not have that property or method and may return unexpected results if it does. To use a <code>Selection</code> object as a string, call its <code>toString()</code> method directly:</p>
+
+<pre class="brush:js;gutter:false;">var selectedText = selObj.toString();</pre>
+
+<ul>
+ <li><code>selObj</code> is a <code>Selection</code> object.</li>
+ <li><code>selectedText</code> is a string (Selected text).</li>
+</ul>
+
+<h3 id="Related_objects">Related objects</h3>
+
+<p>HTML inputs provide simpler helper APIs for working with selection (see {{DOMxRef("HTMLInputElement.setSelectionRange()")}}).</p>
+
+<p>Notice the difference between <em>selection</em> and <em>focus</em>. {{DOMxRef("Document.activeElement")}} returns the focused element.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("Shadow DOM", "#extensions-to-the-documentorshadowroot-mixin", "DocumentOrShadowRoot")}}</td>
+   <td>{{Spec2("Shadow DOM")}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_Compatibility">Browser Compatibility</h2>
+
+<div>
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.getSelection")}}</p>
+</div>
diff --git a/files/zh-cn/web/api/documentorshadowroot/index.html b/files/zh-cn/web/api/documentorshadowroot/index.html
new file mode 100644
index 0000000000..0e3dd27717
--- /dev/null
+++ b/files/zh-cn/web/api/documentorshadowroot/index.html
@@ -0,0 +1,78 @@
+---
+title: DocumentOrShadowRoot
+slug: Web/API/DocumentOrShadowRoot
+tags:
+  - API
+  - DocumentOrShadowRoot
+  - Interface
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - shadow dom
+translation_of: Web/API/DocumentOrShadowRoot
+---
+<div>{{APIRef("Web Components")}}</div>
+
+<p><span class="seoSummary"><a href="/zh-CN/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM API</a> 的 <strong><code>DocumentOrShadowRoot</code></strong> 接口提供了 documents 与 shadow roots 之间共享的 API。The following features are included in both {{DOMxRef("Document")}} and {{DOMxRef("ShadowRoot")}}.</span></p>
+
+<h2 id="属性">属性</h2>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef('Element')}} within the shadow tree that has focus.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the {{DOMxRef('Element')}} that's currently in full screen mode for this document.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{Experimental_Inline}}{{ReadOnlyInline}}</dt>
+ <dd>Returns the element set as the target for mouse events while the pointer is locked. It returns <code>null</code> if lock is pending, the pointer is unlocked, or if the target is in another document.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.styleSheets")}}{{ReadOnlyInline}}</dt>
+ <dd>Returns a {{DOMxRef('StyleSheetList')}} of {{DOMxRef('CSSStyleSheet')}} objects for stylesheets explicitly linked into, or embedded in a document.</dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.caretPositionFromPoint()")}}</dt>
+ <dd>Returns a {{DOMxRef('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}}</dt>
+ <dd>Returns the topmost element at the specified coordinates.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.elementsFromPoint()")}}</dt>
+ <dd>Returns an array of all elements at the specified coordinates.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.getSelection()")}}</dt>
+ <dd>Returns a {{DOMxRef('Selection')}} object representing the range of text selected by the user, or the current position of the caret.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.nodeFromPoint()")}} {{non-standard_inline}}</dt>
+ <dd>Returns the topmost node at the specified coordinates.</dd>
+ <dt>{{DOMxRef("DocumentOrShadowRoot.nodesFromPoint()")}} {{non-standard_inline}}</dt>
+ <dd>Returns an array of all nodes at the specified coordinates.</dd>
+</dl>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('Shadow DOM','#extensions-to-the-documentorshadowroot-mixin','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('Shadow DOM')}}</td>
+   <td>Implementation in Shadow DOM.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('DOM WHATWG','#mixin-documentorshadowroot','DocumentOrShadowRoot')}}</td>
+   <td>{{Spec2('DOM WHATWG')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DocumentOrShadowRoot")}}</p>
+
+<p>[1] This interface's features are still implemented on the {{DOMxRef("Document")}} object.</p>
diff --git a/files/zh-cn/web/api/documentorshadowroot/stylesheets/index.html b/files/zh-cn/web/api/documentorshadowroot/stylesheets/index.html
new file mode 100644
index 0000000000..1c9425a744
--- /dev/null
+++ b/files/zh-cn/web/api/documentorshadowroot/stylesheets/index.html
@@ -0,0 +1,52 @@
+---
+title: DocumentOrShadowRoot.styleSheets
+slug: Web/API/DocumentOrShadowRoot/styleSheets
+translation_of: Web/API/DocumentOrShadowRoot/styleSheets
+---
+<div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div>
+
+<p><span class="seoSummary"><strong><code>styleSheets是</code></strong>{{domxref("DocumentOrShadowRoot")}}接口定义的只读属性，它会返回一个{{domxref('StyleSheetList')}} / {{domxref('CSSStyleSheet')}} 对象，这个对象对应的是通过引入或者嵌入文档中的样式表。</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="说明">说明</h3>
+
+<p>返回的列表中，排序规则如下：</p>
+
+<ul>
+ <li>header标签中通过link标签引入的样式优先，多个link样式表以出现顺序排序</li>
+ <li>接着是在文档中定义的样式表，存在多个这样的样式表时，以<a href="https://dom.spec.whatwg.org/#concept-tree-order">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>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.DocumentOrShadowRoot.styleSheets")}}</p>