diff options
Diffstat (limited to 'files/zh-cn/web/api/element')
| -rw-r--r-- | files/zh-cn/web/api/element/after/index.html | 176 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/append/index.html | 148 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/before/index.html | 188 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/childelementcount/index.html | 15 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/children/index.html | 123 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/firstelementchild/index.html | 101 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/lastelementchild/index.html | 99 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/prepend/index.html | 134 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/remove/index.html | 96 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/replacechildren/index.html | 170 | ||||
| -rw-r--r-- | files/zh-cn/web/api/element/replacewith/index.html | 112 |
11 files changed, 1357 insertions, 5 deletions
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> |