[CRON] sync translated content

1 files changed, 162 insertions, 0 deletions

diff --git a/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html b/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html
new file mode 100644
index 0000000000..d01a334fd7
--- /dev/null
+++ b/files/zh-cn/orphaned/web/api/parentnode/replacechildren/index.html
@@ -0,0 +1,162 @@
+---
+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>