From 2478646b4648d9c3b98482f186e542fc8ca0cc19 Mon Sep 17 00:00:00 2001 From: Irvin Date: Tue, 17 Aug 2021 02:46:21 +0800 Subject: bring some orphaned docs and relocate according to it's counterpart eng doc (partial revert #1616) (#1618) * Revert "Remove previously orphaned file (#1616)" This reverts commit 49c5601989809c347a5a595e3c5edc08731e5305. * fix broken slugs * rm orphaned docs that eng origin is not available * Web/API/Element/after: sync origin english content --- files/zh-cn/web/api/element/after/index.html | 91 ++++++++++ files/zh-cn/web/api/element/before/index.html | 193 +++++++++++++++++++++ files/zh-cn/web/api/element/remove/index.html | 98 +++++++++++ files/zh-cn/web/api/element/replacewith/index.html | 116 +++++++++++++ files/zh-cn/web/api/renderingcontext/index.html | 30 ++++ 5 files changed, 528 insertions(+) create mode 100644 files/zh-cn/web/api/element/after/index.html create mode 100644 files/zh-cn/web/api/element/before/index.html create mode 100644 files/zh-cn/web/api/element/remove/index.html create mode 100644 files/zh-cn/web/api/element/replacewith/index.html create mode 100644 files/zh-cn/web/api/renderingcontext/index.html (limited to 'files/zh-cn') 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..ea111ec412 --- /dev/null +++ b/files/zh-cn/web/api/element/after/index.html @@ -0,0 +1,91 @@ +--- +title: Element.after() +slug: Web/API/Element/after +translation_of: Web/API/Element/after +original_slug: Web/API/ChildNode/after +tags: + - API + - DOM + - Method + - Node + - Reference +browser-compat: api.Element.after +--- +
{{APIRef("DOM")}}
+ +

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

+ +

语法

+ +
+after(... nodes)
+
+ +

参数

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

错误

+ + + +

示例

+ +

插入元素

+ +
let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.after(span);
+
+console.log(container.outerHTML);
+// "<div><p></p><span></span></div>"
+
+ +

插入文本

+ +
let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+
+p.after("Text");
+
+console.log(container.outerHTML);
+// "<div><p></p>Text</div>"
+ +

同时插入元素和文本

+ +
let container = document.createElement("div");
+let p = document.createElement("p");
+container.appendChild(p);
+let span = document.createElement("span");
+
+p.after(span, "Text");
+
+console.log(container.outerHTML);
+// "<div><p></p><span></span>Text</div>"
+ +

规范

+ +{{Specifications}} + +

浏览器兼容性

+ +

{{Compat}}

+ +

相关链接

+ + 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..11553a0194 --- /dev/null +++ b/files/zh-cn/web/api/element/before/index.html @@ -0,0 +1,193 @@ +--- +title: Element.before() +slug: Web/API/Element/before +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Element/before +original_slug: Web/API/ChildNode/before +browser-compat: api.Element.before +--- +
{{APIRef("DOM")}} {{SeeCompatTable}}
+ +

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

+ +

语法

+ +
[Throws, Unscopable]
+void Element.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>"
+ +

Element.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', 'Element.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/remove/index.html b/files/zh-cn/web/api/element/remove/index.html new file mode 100644 index 0000000000..b244385222 --- /dev/null +++ b/files/zh-cn/web/api/element/remove/index.html @@ -0,0 +1,98 @@ +--- + +title: Element.remove() +slug: Web/API/Element/remove +tags: + - API + - Element + - DOM + - Method +translation_of: Web/API/Element/remove +original_slug: Web/API/ChildNode/remove +browser-compat: api.Element.remove +--- +

{{APIRef("DOM")}}

+ +

Element.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()')}}

+ +

Element.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', 'Element.remove')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ + + +

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

+ +

参见

+ + 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..13fe96c23b --- /dev/null +++ b/files/zh-cn/web/api/element/replacewith/index.html @@ -0,0 +1,116 @@ +--- +title: Element.replaceWith() +slug: Web/API/Element/replaceWith +tags: + - API + - DOM + - Method + - Element + - Reference +browser-compat: api.Element.replaceWith +translation_of: Web/API/Element/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/renderingcontext/index.html b/files/zh-cn/web/api/renderingcontext/index.html new file mode 100644 index 0000000000..4cf1dfc0b7 --- /dev/null +++ b/files/zh-cn/web/api/renderingcontext/index.html @@ -0,0 +1,30 @@ +--- +title: RenderingContext +slug: 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 -- cgit v1.2.3-54-g00ecf