diff options
Diffstat (limited to 'files/zh-cn/web/api/document')
15 files changed, 480 insertions, 381 deletions
diff --git a/files/zh-cn/web/api/document/activeelement/index.html b/files/zh-cn/web/api/document/activeelement/index.html new file mode 100644 index 0000000000..b4dcc12e11 --- /dev/null +++ b/files/zh-cn/web/api/document/activeelement/index.html @@ -0,0 +1,87 @@ +--- +title: DocumentOrShadowRoot.activeElement +slug: Web/API/Document/activeElement +translation_of: Web/API/DocumentOrShadowRoot/activeElement +original_slug: 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"><p>Select some text from one of the text areas below:</p> + +<form> + <textarea name="ta-example-one" id="ta-example-one" rows="7" cols="40">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.</textarea> + <textarea name="ta-example-two" id="ta-example-two" rows="7" cols="40">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.</textarea> +</form> + +<p>Active element ID: <b id="output-element"></b></p> +<p>Selected text: <b id="output-text"></b></p></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/document/adoptnode/index.html b/files/zh-cn/web/api/document/adoptnode/index.html index 1f502e20a6..74d824966f 100644 --- a/files/zh-cn/web/api/document/adoptnode/index.html +++ b/files/zh-cn/web/api/document/adoptnode/index.html @@ -17,8 +17,8 @@ translation_of: Web/API/Document/adoptNode </pre> <dl> - <dt><code><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span>node</code></dt> - <dd>导入当前文档的新节点. 新节点的 <code><a href="https://developer.mozilla.org/zh-cn/DOM/Node.parentNode" title="zh-cn/DOM/Node.parentNode">parentNode</a></code> 是 <code>null</code>, 因为它还没有插入当前文档的文档树中,属于游离状态.<span style="display: none;"> </span><span style="display: none;"> </span></dd> + <dt><code><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span>node</code></dt> + <dd>导入当前文档的新节点. 新节点的 <code><a href="https://developer.mozilla.org/zh-cn/DOM/Node.parentNode" title="zh-cn/DOM/Node.parentNode">parentNode</a></code> 是 <code>null</code>, 因为它还没有插入当前文档的文档树中,属于游离状态.<span class="hidden"> </span><span class="hidden"> </span></dd> <dt><code>externalNode</code></dt> <dd>将要从外部文档导入的节点。</dd> </dl> diff --git a/files/zh-cn/web/api/document/cookie/simple_document.cookie_framework/index.html b/files/zh-cn/web/api/document/cookie/simple_document.cookie_framework/index.html deleted file mode 100644 index 450751cefa..0000000000 --- a/files/zh-cn/web/api/document/cookie/simple_document.cookie_framework/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: 简单的cookie框架 -slug: Web/API/Document/cookie/Simple_document.cookie_framework -tags: - - Cookies - - cookie -translation_of: Web/API/Document/cookie/Simple_document.cookie_framework ---- -<h2 id="一个小型框架_一个完整的cookies读写器对Unicode充分支持">一个小型框架: 一个完整的cookies读/写器对Unicode充分支持</h2> - -<p>由于Cookie只是特殊格式的字符串，因此有时很难管理它们。 以下库旨在通过定义一个与一个<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#Storage"><code>Storage</code> </a>对象部分一致的对象(<code>docCookies</code>)来抽象对<code>document.cookie</code>的访问。</p> - -<p> 以下代码也<a href="https://github.com/madmurphy/cookies.js">在GitHub上获取</a>。它是基于GNU General Public License v3.0 许可 (<a href="https://github.com/madmurphy/cookies.js/blob/master/LICENSE">许可链接</a>)</p> - -<h5 id="库">库</h5> - -<pre class="brush: js">/*\ -|*| -|*| :: cookies.js :: -|*| -|*| A complete cookies reader/writer framework with full unicode support. -|*| -|*| Revision #1 - September 4, 2014 -|*| -|*| https://developer.mozilla.org/en-US/docs/Web/API/document.cookie -|*| https://developer.mozilla.org/User:fusionchess -|*| https://github.com/madmurphy/cookies.js -|*| -|*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html -|*| -|*| Syntaxes: -|*| -|*| * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]]) -|*| * docCookies.getItem(name) -|*| * docCookies.removeItem(name[, path[, domain]]) -|*| * docCookies.hasItem(name) -|*| * docCookies.keys() -|*| -\*/ - -var docCookies = { - getItem: function (sKey) { - if (!sKey) { return null; } - return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null; - }, - setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) { - if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; } - var sExpires = ""; - if (vEnd) { - switch (vEnd.constructor) { - case Number: - sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd; - break; - case String: - sExpires = "; expires=" + vEnd; - break; - case Date: - sExpires = "; expires=" + vEnd.toUTCString(); - break; - } - } - document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); - return true; - }, - removeItem: function (sKey, sPath, sDomain) { - if (!this.hasItem(sKey)) { return false; } - document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : ""); - return true; - }, - hasItem: function (sKey) { - if (!sKey) { return false; } - return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); - }, - keys: function () { - var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); - for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } - return aKeys; - } -};</pre> - -<div class="note"><strong>Note:</strong> 对于<em>never-expire-cookies 我们使用一个随意的遥远日期</em><code>Fri, 31 Dec 9999 23:59:59 GMT</code>. 处于任何原因，你担心这样一个日期，使用 <em><a href="http://en.wikipedia.org/wiki/Year_2038_problem">惯例世界末日</a></em>Tue, 19 Jan 2038 03:14:07 GMT - 这是自1970年1月1日00:00:00 UTC以来使用 <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators#Signed_32-bit_integers">有符号的32位二进制整数</a>表示的最大秒数。(i.e., <code>01111111111111111111111111111111</code> which is <code>new Date(0x7fffffff * 1e3)</code>).</div> - -<h3 id="cookie的写入">cookie的写入</h3> - -<h5 id="语法">语法</h5> - -<pre class="syntaxbox"><code>docCookies.setItem(<em>name</em>, <em>value</em>[, <em>end</em>[, <em>path</em>[, <em>domain</em>[, <em>secure</em>]]]])</code></pre> - -<h5 id="Description">Description</h5> - -<p>新增/重写一个 cookie.</p> - -<h5 id="参数">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>新增/重写一个 cookie的 <a href="#new-cookie_syntax">名字</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符传</code></a>).</dd> - <dt><code>value</code></dt> - <dd>cookie的<a href="#new-cookie_syntax">值</a> (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>字符串</code></a>).</dd> - <dt><code>end</code> <font face="Helvetica, arial, sans-serif"><span style="background-color: #eeeeee; font-size: 14px; font-weight: 400;">可选</span></font></dt> - <dd><code><a href="#new-cookie_max-age">max-age</a>（最大有效时间）单位秒</code> (e.g. <code>31536e3</code> 表示一年, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code> </a> 表示永不过期的cookie), 或者以<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a></code> 格式或者<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> 的<a href="#new-cookie_expires"><code>expires</code></a> date（过期时间）; 如果没有，指定的cookie将在会话结束时到期 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number"><code>number</code></a> – finite or <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> – <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). - <div class="note" id="max-age_note" style="margin-top: 1em;"> - <p><strong>Note:</strong> 尽管 <a href="https://tools.ietf.org/html/rfc6265#section-5.2.2">officially defined in rfc6265</a>, <code>max-age</code> 在 Internet Explorer, Edg和一些移动端浏览器上不兼容. 因此，将数字传递给<code>end</code>参数可能无法按预期工作. 可能的解决方案可能是将相对时间转换为绝对时间。例如，以下代码：</p> - - <pre class="brush: js">docCookies.setItem("mycookie", "Hello world!", 150);</pre> - - <p>可以使用绝对日期重写，如下例所示：</p> - - <pre class="brush: js"> maxAgeToGMT (nMaxAge) { - return nMaxAge === Infinity ? "Fri, 31 Dec 9999 23:59:59 GMT" : (new Date(nMaxAge * 1e3 + Date.now())).toUTCString(); -} - -docCookies.setItem("mycookie", "Hello world!", maxAgeToGMT(150));</pre> - - <p>在上面的代码中，函数<code> maxAgeToGMT() </code>用于从相对时间（即，从“age”）创建<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString">GMTString</a>.</code></p> - </div> - </dd> - <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>可访问此cookie的路径. 例如，“/”，“/ mydir”;如果未指定，则默认为当前文档位置的当前路径(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> - <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>可访问此cookie的域名. 例如，<code>“example.com”</code>，<code>“.example.com”</code>（包括所有子域）或<code>“subdomain.example.com”</code>; 如果未指定，则默认为当前文档位置的主机端口(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> - <dt><code>secure</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>cookie将仅通过https安全协议传输 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean"><code>boolean</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>).</dd> -</dl> - -<h3 id="获取一个cookie">获取一个cookie</h3> - -<h5 id="语法_2">语法</h5> - -<pre class="syntaxbox"><code>docCookies.getItem(<em>name</em>)</code></pre> - -<h5 id="描述">描述</h5> - -<p>读一个cookie。如果cookie不存在，则返回null值。Parameters</p> - -<h5 id="参数_2">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>读取cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> -</dl> - -<h3 id="移除一个cookie">移除一个cookie</h3> - -<h5 id="语法_3">语法</h5> - -<pre class="syntaxbox"><code>docCookies.removeItem(<em>name</em>[, <em>path</em>[, <em>domain</em>]])</code></pre> - -<h5 id="描述_2">描述</h5> - -<p>删除一个cookie.</p> - -<h5 id="参数_3">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>待移除cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> - <dt><code>path</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>例如，"<code>/"</code>，"<code>/ </code><code>mydir"</code>;如果未指定，则默认为当前文档位置的当前路径 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>). The path must be <em>absolute</em> (see <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>). For more information on how to use relative paths in this argument, see <a href="#Using_relative_URLs_in_the_path_parameter">this paragraph</a>.</dd> - <dt><code>domain</code> <span class="inlineIndicator optional optionalInline">可选</span></dt> - <dd>例如, <code>"example.com"</code>, 或者 <code>"subdomain.example.com"</code>; 如果未指定，则默认为当前文档位置的主机端口（字符串或null），但不包括子域。 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>), 但不包括子域名。与早期的规范相反，域名中的前置的点被忽略。如果指定了域，则始终包含子域。 - <div class="note"><strong>Note:</strong> 要删除跨子域的cookie，您需要想<code>setItem()样</code>在<code>removeItem()</code>中指定domain属性。</div> - </dd> -</dl> - -<h3 id="检查一个cookie（是否存在）">检查一个cookie（是否存在）</h3> - -<h5 id="语法_4">语法</h5> - -<pre class="syntaxbox"><code>docCookies.hasItem(<em>name</em>)</code></pre> - -<h5 id="描述_3">描述</h5> - -<p>检查当前位置是否存在cookie。</p> - -<h5 id="参数_4">参数</h5> - -<dl> - <dt><code>name</code></dt> - <dd>待检查cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> -</dl> - -<h3 id="获取所有cookie列表">获取所有cookie列表</h3> - -<h5 id="Syntax">Syntax</h5> - -<pre class="syntaxbox"><code>docCookies.keys()</code></pre> - -<h5 id="Description_2">Description</h5> - -<p>返回此位置的所有可读cookie的数组。</p> - -<h3 id="Example_usage">Example usage:</h3> - -<pre class="brush: js">docCookies.setItem("test0", "Hello world!"); -docCookies.setItem("test1", "Unicode test: \u00E0\u00E8\u00EC\u00F2\u00F9", Infinity); -docCookies.setItem("test2", "Hello world!", new Date(2020, 5, 12)); -docCookies.setItem("test3", "Hello world!", new Date(2027, 2, 3), "/blog"); -docCookies.setItem("test4", "Hello world!", "Wed, 19 Feb 2127 01:04:55 GMT"); -docCookies.setItem("test5", "Hello world!", "Fri, 20 Aug 88354 14:07:15 GMT", "/home"); -docCookies.setItem("test6", "Hello world!", 150); -docCookies.setItem("test7", "Hello world!", 245, "/content"); -docCookies.setItem("test8", "Hello world!", null, null, "example.com"); -docCookies.setItem("test9", "Hello world!", null, null, null, true); -docCookies.setItem("test1;=", "Safe character test;=", Infinity); - -alert(docCookies.keys().join("\n")); -alert(docCookies.getItem("test1")); -alert(docCookies.getItem("test5")); -docCookies.removeItem("test1"); -docCookies.removeItem("test5", "/home"); -alert(docCookies.getItem("test1")); -alert(docCookies.getItem("test5")); -alert(docCookies.getItem("unexistingCookie")); -alert(docCookies.getItem()); -alert(docCookies.getItem("test1;=")); -</pre> diff --git a/files/zh-cn/web/api/document/elementfrompoint/index.html b/files/zh-cn/web/api/document/elementfrompoint/index.html index 6fb591e1da..5a0cdd7ffc 100644 --- a/files/zh-cn/web/api/document/elementfrompoint/index.html +++ b/files/zh-cn/web/api/document/elementfrompoint/index.html @@ -1,21 +1,39 @@ --- -title: Document.elementFromPoint() +title: DocumentOrShadowRoot.elementFromPoint() slug: Web/API/Document/elementFromPoint translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint -translation_of_original: Web/API/Document/elementFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- -<div> - {{APIRef()}} {{Fx_minversion_header(3)}}</div> -<h2 id="Summary" name="Summary">概述</h2> -<p>返回当前文档上处于指定坐标位置最顶层的元素, 坐标是相对于包含该文档的浏览器窗口的左上角为原点来计算的, 通常 x 和 y 坐标都应为正数.</p> -<h2 id="Syntax" name="Syntax">语法</h2> -<pre><em>var element</em> = document.elementFromPoint(<em>x</em>, <em>y</em>);</pre> -<ul> - <li><code>element</code> 是返回的DOM<a href="/en-US/docs/DOM/element" title="DOM/element">元素</a>.</li> - <li><code>x</code> 和 <code>y</code> 是坐标数值, 不需要单位比如px.</li> -</ul> -<h2 id="Example" name="Example">示例</h2> -<pre class="brush:html"><!DOCTYPE html> +<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"><!DOCTYPE html> <html lang="en"> <head> <title>elementFromPoint example</title> @@ -35,11 +53,34 @@ function changeColor(newColor) { </body> </html> </pre> -<h2 id="Notes" name="Notes">附注</h2> -<p>If the element at the specified point belongs to another document (for example, an iframe's subdocument), the element in the DOM of the document the method is called on (in the iframe case, the iframe itself) is returned. 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>If the specified point is outside the visible bounds of the document or either coordinate is negative, the result is <code>null</code>.</p> -<p>{{Note("Callers from XUL documents should wait until the <code>onload</code> event has fired before calling this method.")}}</p> -<h2 id="Specification" name="Specification">规范</h2> -<ul> - <li>Preliminary specification: <code><a class="external" href="http://dev.w3.org/csswg/cssom-view/#dom-document-elementfrompoint">elementFromPoint</a></code></li> -</ul> + +<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/document/elementsfrompoint/index.html b/files/zh-cn/web/api/document/elementsfrompoint/index.html index 9a7ee01503..bea911988b 100644 --- a/files/zh-cn/web/api/document/elementsfrompoint/index.html +++ b/files/zh-cn/web/api/document/elementsfrompoint/index.html @@ -1,61 +1,31 @@ --- -title: Document.elementsFromPoint() +title: DocumentOrShadowRoot.elementsFromPoint() slug: Web/API/Document/elementsFromPoint translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint -translation_of_original: Web/API/Document/elementsFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- -<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> +<p>{{APIRef("Shadow DOM")}}{{SeeCompatTable}}</p> -<p><code><strong>elementsFromPoint()</strong></code> 方法可以获取到当前视口内指定坐标处，由里到外排列的所有元素。</p> +<p><span class="seoSummary"><strong><code>elementsFromPoint()</code></strong> 是 {{domxref("DocumentOrShadowRoot")}} 下的一个函数，该函数返还在特定坐标点下的HTML元素数组。</span></p> <h2 id="语法">语法</h2> -<pre class="brush: js">var<em> elements</em> = <em>document</em>.elementsFromPoint(<em>x</em>, <em>y</em>);</pre> - -<h3 id="返回值">返回值</h3> - -<p>一个包含多个元素的数组</p> +<pre class="syntaxbox">var elements = document.elementsFromPoint(x, y);</pre> <h3 id="参数">参数</h3> <dl> <dt>x</dt> - <dd>当前视口内某一点的横坐标</dd> + <dd>坐标点的水平坐标值</dd> <dt>y</dt> - <dd>当前视口内某一点的纵坐标</dd> + <dd>坐标点的垂向坐标值</dd> </dl> -<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]">var output = document.getElementById("output"); -if (document.elementsFromPoint) { - var 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;\">" + - "您的浏览器不支持 <code>document.elementsFromPoint()</code>" + - "</span>"; -}</pre> +<h3 id="返回值">返回值</h3> -<p>{{EmbedLiveSample('Example', '420', '120')}}</p> +<p>一个包含 {{domxref('element')}} 对象的数组.</p> -<h2 id="规范">规范</h2> +<h2 id="其他说明">其他说明</h2> <table class="standard-table"> <tbody> @@ -65,8 +35,8 @@ if (document.elementsFromPoint) { <th scope="col">Comment</th> </tr> <tr> - <td>{{SpecName('CSSOM View', '#dom-document-elementsfrompoint', 'elementsFromPoint')}}</td> - <td>{{Spec2('CSSOM View')}}</td> + <td>{{SpecName('Shadow DOM','','elementsFromPoint()')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> <td>Initial definition.</td> </tr> </tbody> @@ -74,56 +44,8 @@ if (document.elementsFromPoint) { <h2 id="浏览器兼容性">浏览器兼容性</h2> -<p>{{CompatibilityTable}}</p> +<div> -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td> {{CompatChrome(43.0)}}</td> - <td>{{CompatGeckoDesktop("46.0")}}<sup>[1]</sup></td> - <td>10.0 {{property_prefix("ms")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatSafari(11)}}</td> - </tr> - </tbody> -</table> -</div> -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(43.0)}}</td> - <td>{{CompatGeckoMobile("46.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatSafari(11)}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - </tbody> -</table> +<p>{{Compat("api.DocumentOrShadowRoot.elementsFromPoint")}}</p> </div> - -<p> </p> diff --git a/files/zh-cn/web/api/document/mozfullscreen/index.html b/files/zh-cn/web/api/document/fullscreen/index.html index eb15adcede..f1d6edc436 100644 --- a/files/zh-cn/web/api/document/mozfullscreen/index.html +++ b/files/zh-cn/web/api/document/fullscreen/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreen -slug: Web/API/Document/mozFullScreen +slug: Web/API/Document/fullscreen translation_of: Web/API/Document/fullscreen +original_slug: Web/API/Document/mozFullScreen --- <p> </p> diff --git a/files/zh-cn/web/api/document/mozfullscreenelement/index.html b/files/zh-cn/web/api/document/fullscreenelement/index.html index d87cd89683..e4ebc89c0c 100644 --- a/files/zh-cn/web/api/document/mozfullscreenelement/index.html +++ b/files/zh-cn/web/api/document/fullscreenelement/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreenElement -slug: Web/API/Document/mozFullScreenElement +slug: Web/API/Document/fullscreenElement translation_of: Web/API/DocumentOrShadowRoot/fullscreenElement +original_slug: Web/API/DocumentOrShadowRoot/fullscreenElement --- <p>{{ ApiRef() }}</p> <h3 id="Summary" name="Summary">概述</h3> diff --git a/files/zh-cn/web/api/document/mozfullscreenenabled/index.html b/files/zh-cn/web/api/document/fullscreenenabled/index.html index 248797541a..244abe8e26 100644 --- a/files/zh-cn/web/api/document/mozfullscreenenabled/index.html +++ b/files/zh-cn/web/api/document/fullscreenenabled/index.html @@ -1,7 +1,8 @@ --- title: document.mozFullScreenEnabled -slug: Web/API/Document/mozFullScreenEnabled +slug: Web/API/Document/fullscreenEnabled translation_of: Web/API/Document/fullscreenEnabled +original_slug: Web/API/Document/mozFullScreenEnabled --- <p>{{ ApiRef() }}</p> <h3 id="Summary" name="Summary">概述</h3> diff --git a/files/zh-cn/web/api/document/getselection/index.html b/files/zh-cn/web/api/document/getselection/index.html index 73b3a4ce6b..f3eca58f61 100644 --- a/files/zh-cn/web/api/document/getselection/index.html +++ b/files/zh-cn/web/api/document/getselection/index.html @@ -1,15 +1,76 @@ --- -title: document.getSelection +title: DocumentOrShadowRoot.getSelection() slug: Web/API/Document/getSelection translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection +original_slug: Web/API/DocumentOrShadowRoot/getSelection --- -<article class="approved text-content" style="padding-right: 10px; width: 652px; float: left;"> -<div class="boxed translate-rendered" style=""> -<p>{{APIRef("DOM")}}</p> +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> -<p>该方法的功能等价于 {{domxref("Window.getSelection()")}} 方法；其返回一个 {{domxref("Selection")}} 对象，表示文档中当前被选择的文本。</p> -</div> -</article> +<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> </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/document/inputencoding/index.html b/files/zh-cn/web/api/document/inputencoding/index.html deleted file mode 100644 index 00701e8acf..0000000000 --- a/files/zh-cn/web/api/document/inputencoding/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: document.inputEncoding -slug: Web/API/Document/inputEncoding -translation_of: Web/API/Document/characterSet -translation_of_original: Web/API/Document/inputEncoding ---- -<p>{{ ApiRef() }} {{ deprecated_header() }}</p> -<h3 id="概述">概述</h3> -<p>返回一个字符串,代表当前文档渲染时所使用的编码.(比如<code>utf-8</code>).</p> -<div class="warning"> - <strong>警告:</strong> 不要再使用该属性.该属性在DOM 4 规范(草案)中已经被废弃. Gecko 在未来的版本中将会删除它.</div> -<h3 id="语法">语法</h3> -<pre class="eval"><var>encoding</var> = <code>document.inputEncoding;</code> -</pre> -<p><code>inputEncoding</code> 是个只读属性.</p> -<h3 id="规范">规范</h3> -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-inputEncoding">DOM Level 3 Core</a></li> - <li>This has been removed from {{ spec("http://www.w3.org/TR/domcore/","DOM Core Level 4","WD") }}</li> -</ul> -<p>{{ languages( {"en": "en/DOM/document.inputEncoding" } ) }}</p> diff --git a/files/zh-cn/web/api/document/onafterscriptexecute/index.html b/files/zh-cn/web/api/document/onafterscriptexecute/index.html new file mode 100644 index 0000000000..74bd826004 --- /dev/null +++ b/files/zh-cn/web/api/document/onafterscriptexecute/index.html @@ -0,0 +1,45 @@ +--- +title: element.onafterscriptexecute +slug: Web/API/Document/onafterscriptexecute +tags: + - DOM + - onafterscriptexecute +translation_of: Web/API/Document/onafterscriptexecute +original_slug: Web/API/Element/onafterscriptexecute +--- +<div>{{ApiRef}}{{gecko_minversion_header("2")}}</div> + +<h2 id="概述">概述</h2> + +<p>当HTML文档中的{{HTMLElement("script")}}标签内的代码执行完毕时触发该事件,如果这个<code>script</code>标签是用<code>appendChild()</code>等方法动态添加上去的,则不会触发该事件.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em> +</pre> + +<p>当<code>afterscriptexecute</code>事件触发时,<code>funcRef</code>函数就会被调用. 传入参数<code>event</code>的<code>target</code>属性指向触发该事件的那个<code>script</code>元素.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush:js">function finished(e) { + logMessage("Finished script with ID: " + e.target.id); +} + +document.addEventListener("afterscriptexecute", finished, true); +</pre> + +<p><a href="/samples/html/currentScript.html">查看在线演示</a></p> + +<h2 id="规范">规范</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> +</ul> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("element.onbeforescriptexecute")}}</li> + <li>{{domxref("document.currentScript")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/pointerlockelement/index.html b/files/zh-cn/web/api/document/pointerlockelement/index.html index eb6ed9cf98..50f2343da8 100644 --- a/files/zh-cn/web/api/document/pointerlockelement/index.html +++ b/files/zh-cn/web/api/document/pointerlockelement/index.html @@ -2,6 +2,7 @@ title: Document.pointerLockElement slug: Web/API/Document/pointerLockElement translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +original_slug: Web/API/DocumentOrShadowRoot/pointerLockElement --- <div>{{APIRef("DOM")}}</div> diff --git a/files/zh-cn/web/api/document/readystatechange_event/index.html b/files/zh-cn/web/api/document/readystatechange_event/index.html new file mode 100644 index 0000000000..769a0cd3c5 --- /dev/null +++ b/files/zh-cn/web/api/document/readystatechange_event/index.html @@ -0,0 +1,150 @@ +--- +title: 'Document: readystatechange 事件' +slug: Web/API/Document/readystatechange_event +tags: + - Reference + - XMLHttpRequest + - interactive + - 事件 +translation_of: Web/API/Document/readystatechange_event +original_slug: Web/Events/readystatechange事件 +--- +<div>{{APIRef}}</div> + +<p>当文档的 {{domxref("Document.readyState", "readyState")}} 属性发生改变时，会触发 <code>readystatechange</code> 事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>否</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>否</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler 属性</th> + <td><code>onreadystatechange</code></td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<h3 id="实时演示">实时演示</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="controls"> + <button id="reload" type="button">Reload</button> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +#reload { + height: 2rem; +} + +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const log = document.querySelector('.event-log-contents'); +const reload = document.querySelector('#reload'); + +reload.addEventListener('click', () => { + log.textContent =''; + window.setTimeout(() => { + window.location.reload(true); + }, 200); +}); + +window.addEventListener('load', (event) => { + log.textContent = log.textContent + 'load\n'; +}); + +document.addEventListener('readystatechange', (event) => { + log.textContent = log.textContent + `readystate: ${document.readyState}\n`; +}); + +document.addEventListener('DOMContentLoaded', (event) => { + log.textContent = log.textContent + `DOMContentLoaded\n`; +}); + +</pre> + +<h4 id="结果">结果</h4> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="160px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Document/readystatechange_event$samples/Live_example?revision=1607037" width="100%"></iframe></p> + +<h2 id="规范">规范</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("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.readystatechange_event")}}</p> + +<p>IE 浏览器是一直支持 <code>readystatechange</code> 事件的，可作为 <a href="/zh-CN/docs/Mozilla_event_reference/DOMContentLoaded_(event)">DOMContentLoaded </a>事件的替代方法（参见<a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/DOMContentLoaded_%28event%29#Browser_compatibility">Browser compatibility</a>的注释 [2]）。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("DOMContentLoaded")}}</li> + <li>{{event("load")}}</li> + <li>{{event("beforeunload")}}</li> + <li>{{event("unload")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/stylesheets/index.html b/files/zh-cn/web/api/document/stylesheets/index.html index de44c8537b..f94497ceeb 100644 --- a/files/zh-cn/web/api/document/stylesheets/index.html +++ b/files/zh-cn/web/api/document/stylesheets/index.html @@ -1,26 +1,53 @@ --- -title: Document.styleSheets +title: DocumentOrShadowRoot.styleSheets slug: Web/API/Document/styleSheets translation_of: Web/API/DocumentOrShadowRoot/styleSheets -translation_of_original: Web/API/Document/styleSheets +original_slug: Web/API/DocumentOrShadowRoot/styleSheets --- -<div>{{APIRef}}</div> +<div>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</div> -<p><strong><code>Document.styleSheets</code></strong> 只读属性，返回一个由 {{domxref("StyleSheet ")}} 对象组成的 {{domxref("StyleSheetList")}}，每个 {{domxref("StyleSheet ")}} 对象都是一个文档中链接或嵌入的样式表。</p> +<p><span class="seoSummary"><strong><code>styleSheets是</code></strong>{{domxref("DocumentOrShadowRoot")}}接口定义的只读属性，它会返回一个{{domxref('StyleSheetList')}} / {{domxref('CSSStyleSheet')}} 对象，这个对象对应的是通过引入或者嵌入文档中的样式表。</span></p> -<h2 id="Syntax" name="Syntax">语法</h2> +<h2 id="示例代码">示例代码</h2> -<pre class="syntaxbox">let <var>styleSheetList</var> = <em>document</em>.styleSheets; +<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> -<p>返回的对象是一个 {{domxref("StyleSheetList")}}。</p> +<h3 id="说明">说明</h3> -<p>它是一个 {{domxref("StyleSheet")}} 对象的有序集合。<code><em>styleSheetList</em>.item(<em>index</em>)</code> 或 <code><em>styleSheetList</em>{{ mediawiki.External('<em>index</em>') }}</code> 根据它的索引（索引基于0）返回一个单独的样式表对象。</p> - -<pre class="syntaxbox"> </pre> - -<h2 id="Specification" name="Specification">规范</h2> +<p>返回的列表中，排序规则如下：</p> <ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-DocumentStyle-styleSheets">DOM Level 2 Style: styleSheets</a></li> + <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> diff --git a/files/zh-cn/web/api/document/rouchmove_event/index.html b/files/zh-cn/web/api/document/touchmove_event/index.html index 1321a0c4d2..47cfa0fb7b 100644 --- a/files/zh-cn/web/api/document/rouchmove_event/index.html +++ b/files/zh-cn/web/api/document/touchmove_event/index.html @@ -1,7 +1,8 @@ --- title: touchmove -slug: Web/API/Document/rouchmove_event +slug: Web/API/Document/touchmove_event translation_of: Web/API/Document/touchmove_event +original_slug: Web/API/Document/rouchmove_event --- <div>{{APIRef}}</div> |