aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/orphaned/web/api/parentnode
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2021-07-16 16:27:00 -0400
committerGitHub <noreply@github.com>2021-07-17 04:27:00 +0800
commitb9afb23d12dcae1e09f8d04c72143c5ddaa34aea (patch)
treef6c20844119bcaf0131ad4a037e0245577927f2c /files/zh-cn/orphaned/web/api/parentnode
parent1aa671566c3a990ec2df9a46137471d624b6f7ff (diff)
downloadtranslated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.gz
translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.tar.bz2
translated-content-b9afb23d12dcae1e09f8d04c72143c5ddaa34aea.zip
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 <irvinfly@gmail.com>
Diffstat (limited to 'files/zh-cn/orphaned/web/api/parentnode')
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/append/index.html147
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/children/index.html118
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html96
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/index.html82
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html94
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/prepend/index.html135
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html96
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html158
-rw-r--r--files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html162
9 files changed, 0 insertions, 1088 deletions
diff --git a/files/zh-cn/orphaned/web/api/parentnode/append/index.html b/files/zh-cn/orphaned/web/api/parentnode/append/index.html
deleted file mode 100644
index 6f06f7a420..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/append/index.html
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: ParentNode.append()
-slug: orphaned/Web/API/ParentNode/append
-tags:
- - API
- - DOM
- - Node
- - ParentNode
- - Reference
-translation_of: Web/API/ParentNode/append
-original_slug: Web/API/ParentNode/append
----
-<div>{{APIRef("DOM")}}</div>
-
-<div> <strong><code>ParentNode.append</code></strong> 方法在 <code>ParentNode</code>的最后一个子节点之后插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。</div>
-
-<div>被插入的 {{domxref("DOMString")}} 对象等价为 {{domxref("Text")}} 节点。</div>
-
-<div></div>
-
-<div>与 {{domxref("Node.appendChild()")}} 的差异:</div>
-
-<div></div>
-
-<ul>
- <li><code>ParentNode.append()</code>允许追加  {{domxref("DOMString")}} 对象,而<code><font face="Open Sans, Arial, sans-serif"> </font>Node.appendChild()</code> 只接受 {{domxref("Node")}} 对象。</li>
- <li><code>ParentNode.append()</code> <a href="https://repl.it/FgPh/1">没有返回值</a>,而 <code>Node.appendChild()</code> 返回追加的 {{domxref("Node")}} 对象。</li>
- <li><code>ParentNode.append()</code> 可以追加多个节点和字符串,而 <code>Node.appendChild()</code> 只能追加一个节点。</li>
-</ul>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">[Throws, Unscopable]
-void ParentNode.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 [ &lt;p&gt; ]
-</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", &lt;p&gt; ]</pre>
-
-<h3 id="ParentNode.append_方法在_with_语句中不生效"><code>ParentNode.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/ParentNode/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-parentnode-append', 'ParentNode.append()')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>Initial definition.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容">浏览器兼容</h2>
-
-
-
-<p>{{Compat("api.ParentNode.append")}}</p>
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
- <li>{{domxref("ParentNode.prepend()")}}</li>
- <li>{{domxref("Node.appendChild()")}}</li>
- <li>{{domxref("ChildNode.after()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>
diff --git a/files/zh-cn/orphaned/web/api/parentnode/children/index.html b/files/zh-cn/orphaned/web/api/parentnode/children/index.html
deleted file mode 100644
index 70a02ddcca..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/children/index.html
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: ParentNode.children
-slug: orphaned/Web/API/ParentNode/children
-tags:
- - Property
-translation_of: Web/API/ParentNode/children
-original_slug: Web/API/ParentNode/children
----
-<p>{{ APIRef("DOM") }}</p>
-
-<p><code><strong>ParentNode.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是一个指向&lt;p&gt;元素的对象引用
-if (parg.childElementCount)
-// 检查这个&lt;p&gt;元素是否有子元素
-// 译者注:childElementCount有兼容性问题
- {
- var children = parg.children;
- for (var i = 0; i &lt; 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-parentnode-children', 'ParentNode.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("ParentNode")}} 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/orphaned/web/api/parentnode/firstelementchild/index.html b/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html
deleted file mode 100644
index 8e658b4adc..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/firstelementchild/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Element.firstElementChild
-slug: orphaned/Web/API/ParentNode/firstElementChild
-translation_of: Web/API/ParentNode/firstElementChild
-original_slug: Web/API/ParentNode/firstElementChild
----
-<p>{{ APIRef("DOM") }}</p>
-
-<p><strong><code>ParentNode.firstElementChild</code></strong> 只读属性,返回对象的第一个子 {{domxref("元素")}}, 如果没有子元素,则为null。</p>
-
-<div class="note">
-<p><span>他的属性最初是在{{domxref("element遍历")}}纯接口中定义的。由于这个接口包含两组不同的属性,一个针对具有子元素的{{domxref("Node")}},一个针对子元素的属性,因此它们被移动到两个单独的纯接口中,{{domxref("ParentNode")}}和{{domxref("ChildNode")}}。在本例中,firstElementChild移动到{{domxref("ParentNode")}}。这是一个相当技术性的更改,不应该影响兼容性。</span></p>
-</div>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">var <em>element</em> = node.firstElementChild;
-</pre>
-
-<h2 id="例子">例子</h2>
-
-<pre class="brush: html">&lt;ul id="foo"&gt;
- &lt;li&gt;First (1)&lt;/li&gt;
- &lt;li&gt;Second (2)&lt;/li&gt;
- &lt;li&gt;Third (3)&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;script&gt;
-var foo = document.getElementById('foo');
-// yields: First (1)
-console.log(foo.firstElementChild.textContent);
-&lt;/script&gt;
-</pre>
-
-<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2>
-
-<pre><code>// Overwrites native 'firstElementChild' prototype.
-// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
-// Returns array instead of HTMLCollection.
-;(function(constructor) {
- if (constructor &amp;&amp;
- constructor.prototype &amp;&amp;
- 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-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>Splitted the <code>ElementTraversal</code>interface in {{domxref("ChildNode")}} and <code>ParentNode</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.ParentNode.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/ParentNode/lastElementChild$edit#参见" rel="nofollow, noindex"><span>Ed</span></a></h2>
-
-<ul>
- <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li>
- <li>
- <div class="syntaxbox">实现了此纯接口的对象类型:{{domxref("Document")}}、{{domxref("Element")}},和 {{domxref("DocumentFragment")}}。</div>
- </li>
-</ul>
diff --git a/files/zh-cn/orphaned/web/api/parentnode/index.html b/files/zh-cn/orphaned/web/api/parentnode/index.html
deleted file mode 100644
index c6b9a42c69..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: ParentNode
-slug: orphaned/Web/API/ParentNode
-tags:
- - API
- - DOM
- - Mixin
- - Node
- - 参考
- - 接口
- - 节点
-translation_of: Web/API/ParentNode
-original_slug: Web/API/ParentNode
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><code><strong>ParentNode</strong></code> 混合了所有(拥有子元素的) {{domxref("Node")}} 对象包含的共有方法和属性。</p>
-
-<p><code>ParentNode</code> 是一个原始接口,不能够创建这种类型的对象;它在 {{domxref("Element")}}、{{domxref("Document")}} 和 {{domxref("DocumentFragment")}} 对象上被实现。</p>
-
-<h2 id="属性">属性</h2>
-
-<dl>
- <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt>
- <dd>返回一个当前 <code>ParentNode</code> 所含有的后代数量。</dd>
- <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt>
- <dd>返回一个包含 <code>ParentNode</code> 所有后代 {{domxref("Element")}} 对象的动态 {{domxref("HTMLCollection")}} 对象,忽略所有非元素子节点。</dd>
- <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt>
- <dd>返回父节点的第一个 {{domxref("Element")}} 后代,没有时返回 <code>null</code>。</dd>
- <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt>
- <dd>返回父节点的最后一个 {{domxref("Element")}} 后代,没有时返回 <code>null</code>。</dd>
-</dl>
-
-<h2 id="方法">方法</h2>
-
-<dl>
- <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt>
- <dd>在父节点 <code>ParentNode</code> 的最后一个后代后面插入一组 {{domxref("Node")}} 对象或 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd>
- <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt>
- <dd>在父节点 <code>ParentNode</code> 第一个后代前插入一组 {{domxref("Node")}} 对象或者 {{domxref("DOMString")}} 对象。{{domxref("DOMString")}} 对象会以同等的 {{domxref("Text")}} 节点插入。</dd>
- <dt>{{domxref("ParentNode.querySelector()")}}</dt>
- <dd>返回以当前元素为根元素,匹配给定选择器的第一个元素 {{domxref("Element")}}。</dd>
- <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt>
- <dd>返回一个 {{domxref("NodeList")}},表示以当前元素为根元素的匹配给定选择器组的元素列表。</dd>
-</dl>
-
-<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', '#parentnode', 'ParentNode')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>Split the <code>ElementTraversal</code> interface into {{domxref("ChildNode")}} and {{domxref("ParentNode")}}. The {{domxref("ParentNode.firstElementChild")}}, {{domxref("ParentNode.lastElementChild")}}, and {{domxref("ParentNode.childElementCount")}} properties are now defined on the latter. Added the {{domxref("ParentNode.children")}} property, and the {{domxref("ParentNode.querySelector()")}}, {{domxref("ParentNode.querySelectorAll()")}}, {{domxref("ParentNode.append()")}}, and {{domxref("ParentNode.prepend()")}} methods.</td>
- </tr>
- <tr>
- <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td>
- <td>{{Spec2('Element Traversal')}}</td>
- <td>Added the initial definition of its properties to the <code>ElementTraversal</code> pure interface and used it on {{domxref("Element")}}.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.ParentNode")}}</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li>{{domxref("ChildNode")}} 纯接口。</li>
- <li>
- <div class="syntaxbox">实现此 mixin 的对象类型:{{domxref("Document")}}、{{domxref("Element")}},和 {{domxref("DocumentFragment")}}。</div>
- </li>
-</ul>
diff --git a/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html b/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html
deleted file mode 100644
index 566d3a1976..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/lastelementchild/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Element.lastElementChild
-slug: orphaned/Web/API/ParentNode/lastElementChild
-translation_of: Web/API/ParentNode/lastElementChild
-original_slug: Web/API/ParentNode/lastElementChild
----
-<p>{{ APIRef("DOM") }}</p>
-
-<p>只读属性 <code><strong>ParentNode.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("ParentNode")}} and {{domxref("ChildNode")}}. In this case, <code>lastElementChild</code> moved to {{domxref("ParentNode")}}. 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">&lt;ul id="foo"&gt;
- &lt;li&gt;First (1)&lt;/li&gt;
- &lt;li&gt;Second (2)&lt;/li&gt;
- &lt;li&gt;Third (3)&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;script&gt;
-var foo = document.getElementById('foo');
-// yields: Third (3)
-console.log(foo.lastElementChild.textContent);
-&lt;/script&gt;
-</pre>
-
-<h2 id="适用于_IE8、IE9_和_Safari_的_Polyfill">适用于 IE8、IE9 和 Safari 的 Polyfill</h2>
-
-<pre class="brush: js">// Overwrites native 'lastElementChild' prototype.
-// Adds Document &amp; DocumentFragment support for IE9 &amp; Safari.
-// Returns array instead of HTMLCollection.
-;(function(constructor) {
- if (constructor &amp;&amp;
- constructor.prototype &amp;&amp;
- 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-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>Splitted the <code>ElementTraversal</code> interface in {{domxref("ChildNode")}} and <code>ParentNode</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.ParentNode.lastElementChild")}}</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li>纯接口 {{domxref("ParentNode")}} 和 {{domxref("ChildNode")}}。</li>
- <li>
- <div class="syntaxbox">实现了此纯接口的对象类型:{{domxref("Document")}}、{{domxref("Element")}},和 {{domxref("DocumentFragment")}}。</div>
- </li>
-</ul>
diff --git a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html b/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html
deleted file mode 100644
index c2779973b0..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/prepend/index.html
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: ParentNode.prepend()
-slug: orphaned/Web/API/ParentNode/prepend
-tags:
- - API
- - DOM
- - Method
- - Node
- - ParentNode
- - Reference
- - prepend
- - 方法
-translation_of: Web/API/ParentNode/prepend
-original_slug: Web/API/ParentNode/prepend
----
-<div>{{APIRef("DOM")}}</div>
-
-<p><strong><code>ParentNode.prepend</code></strong> 方法可以在父节点的第一个子节点之前插入一系列{{domxref("Node")}}对象或者{{domxref("DOMString")}}对象。{{domxref("DOMString")}}会被当作{{domxref("Text")}}节点对待(也就是说插入的不是HTML代码)。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox">ParentNode.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 [ &lt;span&gt;, &lt;p&gt; ]
-</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", &lt;p&gt; ]</pre>
-
-<h3 id="ParentNode.prepend_is_unscopable"><code>ParentNode.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/ParentNode/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-parentnode-prepend', 'ParentNode.prepend()')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>Initial definition.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="兼容性">兼容性</h2>
-
-
-
-<p>{{Compat("api.ParentNode.prepend")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
- <li>{{domxref("ParentNode.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/orphaned/web/api/parentnode/queryselector/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html
deleted file mode 100644
index 7623caa0ba..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/queryselector/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: ParentNode.querySelector()
-slug: orphaned/Web/API/ParentNode/querySelector
-translation_of: Web/API/ParentNode/querySelector
-original_slug: Web/API/ParentNode/querySelector
----
-<p>{{APIRef("DOM")}}{{Draft}}</p>
-
-<p>{{DOMxRef("ParentNode")}} mixin 将 <code><strong>querySelector()</strong></code> 方法定义为返回一个 {{DOMxRef("Element")}} 表示与指定的选择器组匹配的第一个元素,这些选择器是调用该方法的对象的后代。</p>
-
-<p>如果您需要与选择器列表匹配的所有元素,使用 {{DOMxRef("ParentNode.querySelectorAll", "querySelectorAll()")}} 。</p>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 该方法的实现为 {{DOMxRef("Document.querySelector()")}}, {{DOMxRef("DocumentFragment.querySelector()")}} 和 {{DOMxRef("Element.querySelector()")}}.</p>
-</div>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox"><var>element</var> = <em>parentNode</em>.querySelector(<var>selectors</var>);
-</pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><code>selectors</code></dt>
- <dd>{{DOMxRef("DOMString")}} 包含一个或多个要匹配的选择器。该字符串必须是浏览器支持的<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">compound selector list</a> ;如果不是, 会抛出 <code>SyntaxError</code> 异常. 查阅 <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> 获取有关选择器使用的更多信息. 可以通过使用逗号分隔多个选择器来指定它们。</dd>
-</dl>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 必须使用反斜杠字符转义不属于CSS语法的字符。由于JavaScript也使用退格转义,因此在使用这些字符编写字符串文字是必须特别小心。查阅 {{anch("Escaping special characters")}} 获取更多信息。</p>
-</div>
-
-<h3 id="返回值">返回值</h3>
-
-<p>第一个 {{DOMxRef("Element")}} 匹配至少一个指定的选择器,如果没有找到这样的元素,返回 <code>null</code> 。</p>
-
-<div class="blockIndicator note">
-<p><strong>Note:</strong> 如果指定的选择器包含 <a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>, 则返回值始终为 <code>null</code>.</p>
-</div>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>指定的 <code>selectors</code> 字符串语法无效。</dd>
-</dl>
-
-<h2 id="Specifications">Specifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Specification</th>
- <th scope="col">Status</th>
- <th scope="col">Comment</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
- <td>{{Spec2("DOM WHATWG")}}</td>
- <td>Living standard</td>
- </tr>
- <tr>
- <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
- <td>{{Spec2("Selectors API Level 2")}}</td>
- <td>No change</td>
- </tr>
- <tr>
- <td>{{SpecName("DOM4", "#dom-parentnode-queryselector", "ParentNode.querySelector()")}}</td>
- <td>{{Spec2("DOM4")}}</td>
- <td>Initial definition</td>
- </tr>
- <tr>
- <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
- <td>{{Spec2("Selectors API Level 1")}}</td>
- <td>Original definition</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility">Browser compatibility</h2>
-
-
-
-<p>{{Compat("api.ParentNode.querySelector")}}</p>
-
-<h2 id="See_also">See also</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li>
- <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li>
- <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li>
- <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li>
- <li>This method is available as {{DOMxRef("Element.querySelector()")}}, {{DOMxRef("Document.querySelector()")}}, and {{DOMxRef("DocumentFragment.querySelector()")}}</li>
-</ul>
diff --git a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html b/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html
deleted file mode 100644
index 10936dd5d2..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/queryselectorall/index.html
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: ParentNode.querySelectorAll()
-slug: orphaned/Web/API/ParentNode/querySelectorAll
-tags:
- - API
- - DOM
- - Document
- - ParentNode
- - 参考
- - 方法
- - 查找
- - 选择器
-translation_of: Web/API/ParentNode/querySelectorAll
-original_slug: Web/API/ParentNode/querySelectorAll
----
-<div>{{ApiRef("DOM")}}</div>
-
-<p>The {{domxref("ParentNode")}} mixin defines the <code><strong>querySelectorAll()</strong></code> method 返回一个 {{domxref("NodeList")}} 表示元素的列表,把当前的元素作为根与指定的选择器组相匹配。</p>
-
-<p>如果你只需要一个结果,可以考虑使用{{domxref("ParentNode.querySelector", "querySelector()")}}方法来代替。</p>
-
-<div class="note">
-<p><strong>Note:</strong> This method is implemented as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</p>
-</div>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>);
-</pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><code>selectors</code></dt>
- <dd>一个或多个<a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS选择器</a>,这些选择器由逗号隔开。</dd>
- <dd>A {{domxref("DOMString")}} containing one or more selectors to match against. This string must be a valid <a href="/en-US/docs/Web/CSS/CSS_Selectors">CSS selector</a> string; if it's not, a <code>SyntaxError</code> exception is thrown. See <a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a> for more information about using selectors to identify elements. Multiple selectors may be specified by separating them using commas.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Note:</strong> Characters which are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, special care must be taken when writing string literals using these characters. See {{anch("Escaping special characters")}} for more information.</p>
-</div>
-
-<h3 id="返回值">返回值</h3>
-
-<p>一个不存活的 {{domxref("NodeList")}} ,每个子节点拥有一个 {{domxref("Element")}} 对象,其中每个子节点至少与一个选择器相匹配。</p>
-
-<div class="note">
-<p><strong>Note:</strong> 如果指定的 <code>selectors</code> 包含<a href="/en-US/docs/Web/CSS/Pseudo-elements">CSS pseudo-element</a>,那么返回的列表始终为空。</p>
-</div>
-
-<h3 id="Exceptions">Exceptions</h3>
-
-<dl>
- <dt><code>SyntaxError</code></dt>
- <dd>The syntax of the specified <code>selectors</code> string is not valid.</dd>
-</dl>
-
-<h2 id="例子">例子</h2>
-
-<p>To obtain a {{domxref("NodeList")}} of all of the {{HTMLElement("p")}} elements in the document:</p>
-
-<pre class="brush: js notranslate">var matches = document.querySelectorAll("p");</pre>
-
-<p>这个例子返回了所有 class 为 "note" 或者 "alert" 的 div 元素的一个列表:</p>
-
-<pre class="brush: js notranslate">var matches = document.querySelectorAll("div.note, div.alert");</pre>
-
-<p>Here, we get a list of <code>&lt;p&gt;</code> elements whose immediate parent element is a {{domxref("div")}} with the class <code>"highlighted"</code> and which are located inside a container whose ID is <code>"test"</code>.</p>
-
-<pre class="brush: js notranslate">var container = document.querySelector("#test");
-var matches = container.querySelectorAll("div.highlighted &gt; p");</pre>
-
-<p>This example uses an <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selector</a> to return a list of the {{domxref("iframe")}} elements in the document that contain an attribute named <code>"data-src"</code>:</p>
-
-<pre class="brush: js notranslate">var matches = document.querySelectorAll("iframe[data-src]");</pre>
-
-<p>Here, an attribute selector is used to return a list of the list items contained within a list whose ID is <code>"userlist"</code> which have a <code>"data-active"</code> attribute whose value is <code>"1"</code>:</p>
-
-<pre class="brush: js notranslate">var container = document.querySelector("#userlist");
-var matches = container.querySelectorAll("li[data-active=1]");</pre>
-
-<h2 id="User_notes">User notes</h2>
-
-<p><code>querySelectorAll()</code> behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results.</p>
-
-<h3 id="HTML">HTML</h3>
-
-<p>Consider this HTML, with its three nested {{HTMLElement("div")}} blocks.</p>
-
-<pre class="brush: html notranslate">&lt;div class="outer"&gt;
- &lt;div class="select"&gt;
- &lt;div class="inner"&gt;
- &lt;/div&gt;
- &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<pre class="brush: js notranslate">var select = document.querySelector('.select');
-var inner = select.querySelectorAll('.outer .inner');
-inner.length; // 1, not 0!
-</pre>
-
-<p>In this example, when selecting <code>".outer .inner"</code> in the context the <code>&lt;div&gt;</code> with the class <code>"select"</code>, the element with the class <code>".inner"</code> is still found, even though <code>.outer</code> is not a descendant of the base element on which the search is performed (<code>".select"</code>). By default, <code>querySelectorAll()</code> only verifies that the last element in the selector is within the search scope.</p>
-
-<p>The {{cssxref(":scope")}} pseudo-class restores the expected behavior, only matching selectors on descendants of the base element:</p>
-
-<pre class="brush: js notranslate">var select = document.querySelector('.select');
-var inner = select.querySelectorAll(':scope .outer .inner');
-inner.length; // 0</pre>
-
-<h2 id="规范">规范</h2>
-
-<table class="standard-table">
- <tbody>
- <tr>
- <th scope="col">Specification</th>
- <th scope="col">Status</th>
- <th scope="col">Comment</th>
- </tr>
- <tr>
- <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
- <td>{{Spec2("DOM WHATWG")}}</td>
- <td>Living standard</td>
- </tr>
- <tr>
- <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
- <td>{{Spec2("Selectors API Level 2")}}</td>
- <td>No change</td>
- </tr>
- <tr>
- <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td>
- <td>{{Spec2("DOM4")}}</td>
- <td>Initial definition</td>
- </tr>
- <tr>
- <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td>
- <td>{{Spec2("Selectors API Level 1")}}</td>
- <td>Original definition</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.ParentNode.querySelectorAll")}}</p>
-
-<h2 id="参见">参见</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">Locating DOM elements using selectors</a></li>
- <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for <code>querySelector()</code></a></li>
- <li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selectors</a> in the CSS Guide</li>
- <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">Attribute selectors</a> in the MDN Learning Area</li>
- <li>This method is available as {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, and {{domxref("DocumentFragment.querySelectorAll()")}}</li>
-</ul>
diff --git a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html b/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html
deleted file mode 100644
index d01a334fd7..0000000000
--- a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: ParentNode.replaceChildren()
-slug: orphaned/Web/API/ParentNode/replaceChildren
-translation_of: Web/API/ParentNode/replaceChildren
-original_slug: Web/API/ParentNode/replaceChildren
----
-<div>{{APIRef("DOM")}}{{seecompattable}}</div>
-
-<p><strong><code>ParentNode.replaceChildren()</code></strong> 方法将一个 {{domxref("Node")}} 的后代替换为指定的后代集合。这些新的后代可以为 {{domxref("DOMString")}} 或 {{domxref("Node")}} 对象。</p>
-
-<h2 id="语法">语法</h2>
-
-<pre class="syntaxbox notranslate">// [Throws, Unscopable]
-ParentNode.replaceChildren(...<var>nodesOrDOMStrings</var>) // 返回 undefined
-</pre>
-
-<h3 id="参数">参数</h3>
-
-<dl>
- <dt><code><var>nodesOrDOMStrings</var></code></dt>
- <dd>一组用于替换 <code>ParentNode</code> 现有后代的 {{domxref("Node")}} 或 {{domxref("DOMString")}} 对象。若没有指定替代对象时,<code>ParentNode</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">&lt;h2&gt;派对食物列表&lt;/h2&gt;
-
-&lt;main&gt;
- &lt;div&gt;
- &lt;label for="no"&gt;不,谢谢了!&lt;/label&gt;
-
- &lt;select id="no" multiple size="10"&gt;
- &lt;option&gt;苹果&lt;/option&gt;
- &lt;option&gt;橘子&lt;/option&gt;
- &lt;option&gt;葡萄&lt;/option&gt;
- &lt;option&gt;香蕉&lt;/option&gt;
- &lt;option&gt;奇异果&lt;/option&gt;
- &lt;option&gt;巧克力饼干&lt;/option&gt;
- &lt;option&gt;花生饼干&lt;/option&gt;
- &lt;option&gt;巧克力棒&lt;/option&gt;
- &lt;option&gt;火腿三明治&lt;/option&gt;
- &lt;option&gt;乳酪三明治&lt;/option&gt;
- &lt;option&gt;沙拉三明治&lt;/option&gt;
- &lt;option&gt;冰淇淋&lt;/option&gt;
- &lt;option&gt;果冻&lt;/option&gt;
- &lt;option&gt;胡萝卜和鹰嘴豆泥&lt;/option&gt;
- &lt;option&gt;玛格丽特披萨&lt;/option&gt;
- &lt;option&gt;腊肠比萨&lt;/option&gt;
- &lt;option&gt;素比萨&lt;/option&gt;
- &lt;/select&gt;
- &lt;/div&gt;
-
- &lt;div class="buttons"&gt;
- &lt;button id="to-yes"&gt;转移到"是" --&amp;gt;&lt;/button&gt;
- &lt;button id="to-no"&gt;&amp;lt;-- 转移到 "否"&lt;/button&gt;
- &lt;/div&gt;
-
- &lt;div&gt;
- &lt;label for="yes"&gt;是的,请!&lt;/label&gt;
-
- &lt;select id="yes" multiple size="10"&gt;
-
- &lt;/select&gt;
- &lt;/div&gt;
-&lt;/main&gt;</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', () =&gt; {
- const selectedTransferOptions = document.querySelectorAll('#no option:checked');
- const existingYesOptions = document.querySelectorAll('#yes option');
- yesSelect.replaceChildren(...selectedTransferOptions, ...existingYesOptions);
-});
-
-noBtn.addEventListener('click', () =&gt; {
- 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-parentnode-replacechildren', 'ParentNode.replaceChildren()')}}</td>
- <td>{{Spec2('DOM WHATWG')}}</td>
- <td>Initial definition.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="浏览器兼容性">浏览器兼容性</h2>
-
-
-
-<p>{{Compat("api.ParentNode.replaceChildren")}}</p>
-
-<h2 id="相关链接">相关链接</h2>
-
-<ul>
- <li>{{domxref("ParentNode")}} and {{domxref("ChildNode")}}</li>
- <li>{{domxref("ParentNode.prepend()")}}</li>
- <li>{{domxref("ParentNode.append()")}}</li>
- <li>{{domxref("NodeList")}}</li>
-</ul>